add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / view / chooser / Window.js

/**\r
 * @class Ext.chooser.Window\r
 * @extends Ext.window.Window\r
 * @author Ed Spencer\r
 * \r
 * This is a simple subclass of the built-in Ext.window.Window class. Although it weighs in at 100+ lines, most of this\r
 * is just configuration. This Window class uses a border layout and creates a DataView in the central region and an\r
 * information panel in the east. It also sets up a toolbar to enable sorting and filtering of the items in the \r
 * DataView. We add a few simple methods to the class at the bottom, see the comments inline for details.\r
 */\r
Ext.define('Ext.chooser.Window', {\r
    extend: 'Ext.window.Window',\r
    uses: [\r
        'Ext.layout.container.Border',\r
        'Ext.form.field.Text',\r
        'Ext.form.field.ComboBox',\r
        'Ext.toolbar.TextItem',\r
        'Ext.layout.container.Fit'\r
    ],\r
    \r
    height: 400,\r
    width : 700,\r
    title : 'Choose an Image',\r
    closeAction: 'hide',\r
    layout: 'border',\r
    // modal: true,\r
    border: false,\r
    bodyBorder: false,\r
\r
    /**\r
     * @event selected\r
     * Fired whenever the user selects an image by double clicked it or clicking the window's OK button\r
     * @param {Ext.data.Model} image The image that was selected\r
     */\r
    \r
    /**\r
     * initComponent is a great place to put any code that needs to be run when a new instance of a component is\r
     * created. Here we just specify the items that will go into our Window, plus the Buttons that we want to appear\r
     * at the bottom. Finally we call the superclass initComponent.\r
     */\r
    initComponent: function() {\r
        this.items = [\r
            {\r
                xtype: 'panel',\r
                region: 'center',\r
                layout: 'fit',\r
                items: {\r
                    xtype: 'iconbrowser',\r
                    scrollable: true,\r
                    id: 'img-chooser-view',\r
                    listeners: {\r
                        scope: this,\r
                        selectionchange: this.onIconSelect,\r
                        itemdblclick: this.fireImageSelected\r
                    }\r
                },\r
                \r
                tbar: [\r
                    {\r
                        xtype: 'textfield',\r
                        name : 'filter',\r
                        fieldLabel: 'Filter',\r
                        labelAlign: 'right',\r
                        labelWidth: null,\r
                        listeners: {\r
                            scope : this,\r
                            buffer: 200,\r
                            change: this.filter\r
                        }\r
                    },\r
                    {\r
                        margin: '0 0 0 10',\r
                        inputWidth: 150,\r
                        xtype: 'combo',\r
                        labelAlign: 'right',\r
\r
                        // Use non-breaking space so that labelWidth of null shrinkwraps the unbroken string width\r
                        fieldLabel: 'Sort\u00a0By',\r
                        labelWidth: null,\r
                        valueField: 'field',\r
                        displayField: 'label',\r
                        value: 'type',\r
                        editable: false,\r
                        store: Ext.create('Ext.data.Store', {\r
                            fields: ['field', 'label'],\r
                            data: [{label: 'Name', field: 'name'}, {label: 'Type', field: 'type'}]\r
                        }),\r
                        listeners: {\r
                            scope : this,\r
                            select: this.sort\r
                        }\r
                    }\r
                ]\r
            },\r
            {\r
                xtype: 'infopanel',\r
                region: 'east',\r
                split: true\r
            }\r
        ];\r
        \r
        this.buttons = [\r
            {\r
                text: 'OK',\r
                scope: this,\r
                handler: this.fireImageSelected\r
            },\r
            {\r
                text: 'Cancel',\r
                scope: this,\r
                handler: function() {\r
                    this.hide();\r
                }\r
            }\r
        ];\r
        \r
        this.callParent(arguments);\r
    },\r
    \r
    /**\r
     * @private\r
     * Called whenever the user types in the Filter textfield. Filters the DataView's store\r
     */\r
    filter: function(field, newValue) {\r
        var view = this.down('iconbrowser'),\r
            store = view.getStore(),\r
            selModel = view.getSelectionModel(),\r
            selection = selModel.getSelection()[0];\r
        \r
        store.getFilters().replaceAll({\r
            property: 'name',\r
            anyMatch: true,\r
            value   : newValue\r
        });\r
        if (selection && store.indexOf(selection) === -1) {\r
            selModel.clearSelections();\r
            this.down('infopanel').clear();\r
        }\r
        \r
    },\r
    \r
    /**\r
     * @private\r
     * Called whenever the user changes the sort field using the top toolbar's combobox\r
     */\r
    sort: function() {\r
        var field = this.down('combobox').getValue();\r
        this.down('iconbrowser').store.sort(field);\r
    },\r
    \r
    /**\r
     * Called whenever the user clicks on an item in the DataView. This tells the info panel in the east region to\r
     * display the details of the image that was clicked on\r
     */\r
    onIconSelect: function(dataview, selections) {\r
        var selected = selections[0];\r
        \r
        if (selected) {\r
            this.down('infopanel').loadRecord(selected);\r
        }\r
    },\r
    \r
    /**\r
     * Fires the 'selected' event, informing other components that an image has been selected\r
     */\r
    fireImageSelected: function() {\r
        var selectedImage = this.down('iconbrowser').selModel.getSelection()[0];\r
        \r
        if (selectedImage) {\r
            this.fireEvent('selected', selectedImage);\r
            this.hide();\r
        }\r
    }\r
});