examples/view/chooser/Window.js

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