examples/view/chooser/Window.js

   1 /**
   2  * @class Ext.chooser.Window
   3  * @extends Ext.window.Window
   4  * @author Ed Spencer
   5  *
   6  * This is a simple subclass of the built-in Ext.window.Window class. Although it weighs in at 100+ lines, most of this
   7  * is just configuration. This Window class uses a border layout and creates a DataView in the central region and an
   8  * information panel in the east. It also sets up a toolbar to enable sorting and filtering of the items in the
   9  * DataView. We add a few simple methods to the class at the bottom, see the comments inline for details.
  10  */
  11 Ext.define('Ext.chooser.Window', {
  12     extend: 'Ext.window.Window',
  13     uses: [
  14         'Ext.layout.container.Border',
  15         'Ext.form.field.Text',
  16         'Ext.form.field.ComboBox',
  17         'Ext.toolbar.TextItem'
  18     ],
  19
  20     height: 400,
  21     width : 600,
  22     title : 'Choose an Image',
  23     closeAction: 'hide',
  24     layout: 'border',
  25     // modal: true,
  26     border: false,
  27     bodyBorder: false,
  28
  29     /**
  30      * initComponent is a great place to put any code that needs to be run when a new instance of a component is
  31      * created. Here we just specify the items that will go into our Window, plus the Buttons that we want to appear
  32      * at the bottom. Finally we call the superclass initComponent.
  33      */
  34     initComponent: function() {
  35         this.items = [
  36             {
  37                 xtype: 'panel',
  38                 region: 'center',
  39                 autoScroll: true,
  40
  41                 items: {
  42                     xtype: 'iconbrowser',
  43                     id: 'img-chooser-view',
  44                     listeners: {
  45                         scope: this,
  46                         selectionchange: this.onIconSelect,
  47                         itemdblclick: this.fireImageSelected
  48                     }
  49                 },
  50
  51                 tbar: [
  52                     {
  53                         xtype: 'textfield',
  54                         name : 'filter',
  55                         fieldLabel: 'Filter',
  56                         labelAlign: 'right',
  57                         labelWidth: 35,
  58                         listeners: {
  59                             scope : this,
  60                             buffer: 50,
  61                             change: this.filter
  62                         }
  63                     },
  64                     ' ',
  65                     {
  66                         xtype: 'combo',
  67                         fieldLabel: 'Sort By',
  68                         labelAlign: 'right',
  69                         labelWidth: 45,
  70                         valueField: 'field',
  71                         displayField: 'label',
  72                         value: 'Type',
  73                         editable: false,
  74                         store: Ext.create('Ext.data.Store', {
  75                             fields: ['field', 'label'],
  76                             sorters: 'type',
  77                             proxy : {
  78                                 type: 'memory',
  79                                 data  : [{label: 'Name', field: 'name'}, {label: 'Type', field: 'type'}]
  80                             }
  81                         }),
  82                         listeners: {
  83                             scope : this,
  84                             select: this.sort
  85                         }
  86                     }
  87                 ]
  88             },
  89             {
  90                 xtype: 'infopanel',
  91                 region: 'east',
  92                 split: true
  93             }
  94         ];
  95
  96         this.buttons = [
  97             {
  98                 text: 'OK',
  99                 scope: this,
 100                 handler: this.fireImageSelected
 101             },
 102             {
 103                 text: 'Cancel',
 104                 scope: this,
 105                 handler: function() {
 106                     this.hide();
 107                 }
 108             }
 109         ];
 110
 111         this.callParent(arguments);
 112
 113         /**
 114          * Specifies a new event that this component will fire when the user selects an item. The event is fired by the
 115          * fireImageSelected function below. Other components can listen to this event and take action when it is fired
 116          */
 117         this.addEvents(
 118             /**
 119              * @event selected
 120              * Fired whenever the user selects an image by double clicked it or clicking the window's OK button
 121              * @param {Ext.data.Model} image The image that was selected
 122              */
 123             'selected'
 124         );
 125     },
 126
 127     /**
 128      * @private
 129      * Called whenever the user types in the Filter textfield. Filters the DataView's store
 130      */
 131     filter: function(field, newValue) {
 132         var store = this.down('iconbrowser').store,
 133             dataview = this.down('dataview');
 134
 135         store.suspendEvents();
 136         store.clearFilter();
 137         dataview.getSelectionModel().clearSelections();
 138         store.resumeEvents();
 139         store.filter({
 140             property: 'name',
 141             anyMatch: true,
 142             value   : newValue
 143         });
 144     },
 145
 146     /**
 147      * @private
 148      * Called whenever the user changes the sort field using the top toolbar's combobox
 149      */
 150     sort: function() {
 151         var field = this.down('combobox').getValue();
 152
 153         this.down('dataview').store.sort(field);
 154     },
 155
 156     /**
 157      * Called whenever the user clicks on an item in the DataView. This tells the info panel in the east region to
 158      * display the details of the image that was clicked on
 159      */
 160     onIconSelect: function(dataview, selections) {
 161         var selected = selections[0];
 162
 163         if (selected) {
 164             this.down('infopanel').loadRecord(selected);
 165         }
 166     },
 167
 168     /**
 169      * Fires the 'selected' event, informing other components that an image has been selected
 170      */
 171     fireImageSelected: function() {
 172         var selectedImage = this.down('iconbrowser').selModel.getSelection()[0];
 173
 174         if (selectedImage) {
 175             this.fireEvent('selected', selectedImage);
 176             this.hide();
 177         }
 178     }
 179 });