add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / form / ItemSelector.js

/*\r
 * Note that this control will most likely remain as an example, and not as a core Ext form\r
 * control.  However, the API will be changing in a future release and so should not yet be\r
 * treated as a final, stable API at this time.\r
 */\r
\r
/**\r
 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
 */\r
Ext.define('Ext.ux.form.ItemSelector', {\r
    extend: 'Ext.ux.form.MultiSelect',\r
    alias: ['widget.itemselectorfield', 'widget.itemselector'],\r
    alternateClassName: ['Ext.ux.ItemSelector'],\r
    requires: [\r
        'Ext.button.Button',\r
        'Ext.ux.form.MultiSelect'\r
    ],\r
\r
    /**\r
     * @cfg {Boolean} [hideNavIcons=false] True to hide the navigation icons\r
     */\r
    hideNavIcons:false,\r
\r
    /**\r
     * @cfg {Array} buttons Defines the set of buttons that should be displayed in between the ItemSelector\r
     * fields. Defaults to <tt>['top', 'up', 'add', 'remove', 'down', 'bottom']</tt>. These names are used\r
     * to build the button CSS class names, and to look up the button text labels in {@link #buttonsText}.\r
     * This can be overridden with a custom Array to change which buttons are displayed or their order.\r
     */\r
    buttons: ['top', 'up', 'add', 'remove', 'down', 'bottom'],\r
\r
    /**\r
     * @cfg {Object} buttonsText The tooltips for the {@link #buttons}.\r
     * Labels for buttons.\r
     */\r
    buttonsText: {\r
        top: "Move to Top",\r
        up: "Move Up",\r
        add: "Add to Selected",\r
        remove: "Remove from Selected",\r
        down: "Move Down",\r
        bottom: "Move to Bottom"\r
    },\r
\r
    layout: {\r
        type: 'hbox',\r
        align: 'stretch'\r
    },\r
    \r
    ariaRole: 'group',\r
\r
    initComponent: function() {\r
        var me = this;\r
\r
        me.ddGroup = me.id + '-dd';\r
        me.ariaRenderAttributes = me.ariaRenderAttributes || {};\r
        me.ariaRenderAttributes['aria-labelledby'] = me.id + '-labelEl';\r
        \r
        me.callParent();\r
\r
        // bindStore must be called after the fromField has been created because\r
        // it copies records from our configured Store into the fromField's Store\r
        me.bindStore(me.store);\r
    },\r
\r
    createList: function(title){\r
        var me = this;\r
\r
        return Ext.create('Ext.ux.form.MultiSelect', {\r
            // We don't want the multiselects themselves to act like fields,\r
            // so override these methods to prevent them from including\r
            // any of their values\r
            submitValue: false,\r
            getSubmitData: function(){\r
                return null;\r
            },\r
            getModelData: function(){\r
                return null;    \r
            },\r
            flex: 1,\r
            dragGroup: me.ddGroup,\r
            dropGroup: me.ddGroup,\r
            title: title,\r
            store: {\r
                model: me.store.model,\r
                data: []\r
            },\r
            displayField: me.displayField,\r
            valueField: me.valueField,\r
            disabled: me.disabled,\r
            listeners: {\r
                boundList: {\r
                    scope: me,\r
                    itemdblclick: me.onItemDblClick,\r
                    drop: me.syncValue\r
                }\r
            }\r
        });\r
    },\r
\r
    setupItems: function() {\r
        var me = this;\r
\r
        me.fromField = me.createList(me.fromTitle);\r
        me.toField = me.createList(me.toTitle);\r
\r
        return [\r
            me.fromField,\r
            {\r
                xtype: 'toolbar',\r
                margin: '0 4',\r
                padding: 0,\r
                layout: {\r
                    type: 'vbox',\r
                    pack: 'center'\r
                },\r
                items: me.createButtons()\r
            },\r
            me.toField\r
        ];\r
    },\r
\r
    createButtons: function() {\r
        var me = this,\r
            buttons = [];\r
\r
        if (!me.hideNavIcons) {\r
            Ext.Array.forEach(me.buttons, function(name) {\r
                buttons.push({\r
                    xtype: 'button',\r
                    ui: 'default',\r
                    tooltip: me.buttonsText[name],\r
                    ariaLabel: me.buttonsText[name],\r
                    handler: me['on' + Ext.String.capitalize(name) + 'BtnClick'],\r
                    cls: Ext.baseCSSPrefix + 'form-itemselector-btn',\r
                    iconCls: Ext.baseCSSPrefix + 'form-itemselector-' + name,\r
                    navBtn: true,\r
                    scope: me,\r
                    margin: '4 0 0 0'\r
                });\r
            });\r
        }\r
        return buttons;\r
    },\r
\r
    /**\r
     * Get the selected records from the specified list.\r
     * \r
     * Records will be returned *in store order*, not in order of selection.\r
     * @param {Ext.view.BoundList} list The list to read selections from.\r
     * @return {Ext.data.Model[]} The selected records in store order.\r
     * \r
     */\r
    getSelections: function(list) {\r
        var store = list.getStore();\r
\r
        return Ext.Array.sort(list.getSelectionModel().getSelection(), function(a, b) {\r
            a = store.indexOf(a);\r
            b = store.indexOf(b);\r
\r
            if (a < b) {\r
                return -1;\r
            } else if (a > b) {\r
                return 1;\r
            }\r
            return 0;\r
        });\r
    },\r
\r
    onTopBtnClick : function() {\r
        var list = this.toField.boundList,\r
            store = list.getStore(),\r
            selected = this.getSelections(list);\r
\r
        store.suspendEvents();\r
        store.remove(selected, true);\r
        store.insert(0, selected);\r
        store.resumeEvents();\r
        list.refresh();\r
        this.syncValue(); \r
        list.getSelectionModel().select(selected);\r
    },\r
\r
    onBottomBtnClick : function() {\r
        var list = this.toField.boundList,\r
            store = list.getStore(),\r
            selected = this.getSelections(list);\r
\r
        store.suspendEvents();\r
        store.remove(selected, true);\r
        store.add(selected);\r
        store.resumeEvents();\r
        list.refresh();\r
        this.syncValue();\r
        list.getSelectionModel().select(selected);\r
    },\r
\r
    onUpBtnClick : function() {\r
        var list = this.toField.boundList,\r
            store = list.getStore(),\r
            selected = this.getSelections(list),\r
            rec,\r
            i = 0,\r
            len = selected.length,\r
            index = 0;\r
\r
        // Move each selection up by one place if possible\r
        store.suspendEvents();\r
        for (; i < len; ++i, index++) {\r
            rec = selected[i];\r
            index = Math.max(index, store.indexOf(rec) - 1);\r
            store.remove(rec, true);\r
            store.insert(index, rec);\r
        }\r
        store.resumeEvents();\r
        list.refresh();\r
        this.syncValue();\r
        list.getSelectionModel().select(selected);\r
    },\r
\r
    onDownBtnClick : function() {\r
        var list = this.toField.boundList,\r
            store = list.getStore(),\r
            selected = this.getSelections(list),\r
            rec,\r
            i = selected.length - 1,\r
            index = store.getCount() - 1;\r
\r
        // Move each selection down by one place if possible\r
        store.suspendEvents();\r
        for (; i > -1; --i, index--) {\r
            rec = selected[i];\r
            index = Math.min(index, store.indexOf(rec) + 1);\r
            store.remove(rec, true);\r
            store.insert(index, rec);\r
        }\r
        store.resumeEvents();\r
        list.refresh();\r
        this.syncValue();\r
        list.getSelectionModel().select(selected);\r
    },\r
\r
    onAddBtnClick : function() {\r
        var me = this,\r
            selected = me.getSelections(me.fromField.boundList);\r
\r
        me.moveRec(true, selected);\r
        me.toField.boundList.getSelectionModel().select(selected);\r
    },\r
\r
    onRemoveBtnClick : function() {\r
        var me = this,\r
            selected = me.getSelections(me.toField.boundList);\r
\r
        me.moveRec(false, selected);\r
        me.fromField.boundList.getSelectionModel().select(selected);\r
    },\r
\r
    moveRec: function(add, recs) {\r
        var me = this,\r
            fromField = me.fromField,\r
            toField   = me.toField,\r
            fromStore = add ? fromField.store : toField.store,\r
            toStore   = add ? toField.store   : fromField.store;\r
\r
        fromStore.suspendEvents();\r
        toStore.suspendEvents();\r
        fromStore.remove(recs);\r
        toStore.add(recs);\r
        fromStore.resumeEvents();\r
        toStore.resumeEvents();\r
        \r
        // If the list item was focused when moved (e.g. via double-click)\r
        // then removing it will cause the focus to be thrown back to the\r
        // document body. Which might disrupt things if ItemSelector is\r
        // contained by a floating thingie like a Menu.\r
        // Focusing the list itself will prevent that.\r
        if (fromField.boundList.containsFocus) {\r
            fromField.boundList.focus();\r
        }\r
\r
        fromField.boundList.refresh();\r
        toField.boundList.refresh();\r
\r
        me.syncValue();\r
    },\r
\r
    // Synchronizes the submit value with the current state of the toStore\r
    syncValue: function() {\r
        var me = this; \r
        me.mixins.field.setValue.call(me, me.setupValue(me.toField.store.getRange()));\r
    },\r
\r
    onItemDblClick: function(view, rec) {\r
        this.moveRec(view === this.fromField.boundList, rec);\r
    },\r
\r
    setValue: function(value) {\r
        var me = this,\r
            fromField = me.fromField,\r
            toField = me.toField,\r
            fromStore = fromField.store,\r
            toStore = toField.store,\r
            selected;\r
\r
        // Wait for from store to be loaded\r
        if (!me.fromStorePopulated) {\r
            me.fromField.store.on({\r
                load: Ext.Function.bind(me.setValue, me, [value]),\r
                single: true\r
            });\r
            return;\r
        }\r
\r
        value = me.setupValue(value);\r
        me.mixins.field.setValue.call(me, value);\r
\r
        selected = me.getRecordsForValue(value);\r
\r
        // Clear both left and right Stores.\r
        // Both stores must not fire events during this process.\r
        fromStore.suspendEvents();\r
        toStore.suspendEvents();\r
        fromStore.removeAll();\r
        toStore.removeAll();\r
\r
        // Reset fromStore\r
        me.populateFromStore(me.store);\r
\r
        // Copy selection across to toStore\r
        Ext.Array.forEach(selected, function(rec){\r
            // In the from store, move it over\r
            if (fromStore.indexOf(rec) > -1) {\r
                fromStore.remove(rec);\r
            }\r
            toStore.add(rec);\r
        });\r
\r
        // Stores may now fire events\r
        fromStore.resumeEvents();\r
        toStore.resumeEvents();\r
\r
        // Refresh both sides and then update the app layout\r
        Ext.suspendLayouts();\r
        fromField.boundList.refresh();\r
        toField.boundList.refresh();\r
        Ext.resumeLayouts(true);        \r
    },\r
\r
    onBindStore: function(store, initial) {\r
        var me = this;\r
\r
        if (me.fromField) {\r
            me.fromField.store.removeAll();\r
            me.toField.store.removeAll();\r
\r
            // Add everything to the from field as soon as the Store is loaded\r
            if (store.getCount()) {\r
                me.populateFromStore(store);\r
            } else {\r
                me.store.on('load', me.populateFromStore, me);\r
            }\r
        }\r
    },\r
\r
    populateFromStore: function(store) {\r
        var fromStore = this.fromField.store;\r
\r
        // Flag set when the fromStore has been loaded\r
        this.fromStorePopulated = true;\r
\r
        fromStore.add(store.getRange());\r
\r
        // setValue waits for the from Store to be loaded\r
        fromStore.fireEvent('load', fromStore);\r
    },\r
\r
    onEnable: function(){\r
        var me = this;\r
\r
        me.callParent();\r
        me.fromField.enable();\r
        me.toField.enable();\r
\r
        Ext.Array.forEach(me.query('[navBtn]'), function(btn){\r
            btn.enable();\r
        });\r
    },\r
\r
    onDisable: function(){\r
        var me = this;\r
\r
        me.callParent();\r
        me.fromField.disable();\r
        me.toField.disable();\r
\r
        Ext.Array.forEach(me.query('[navBtn]'), function(btn){\r
            btn.disable();\r
        });\r
    },\r
\r
    onDestroy: function(){\r
        this.bindStore(null);\r
        this.callParent();\r
    }\r
});\r