add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / view / MultiSelector.js

/**\r
 * This component provides a grid holding selected items from a second store of potential\r
 * members. The `store` of this component represents the selected items. The "search store"\r
 * represents the potentially selected items.\r
 *\r
 * While this component is a grid and so you can configure `columns`, it is best to leave\r
 * that to this class in its `initComponent` method. That allows this class to create the\r
 * extra column that allows the user to remove rows. Instead use `{@link #fieldName}` and\r
 * `{@link #fieldTitle}` to configure the primary column's `dataIndex` and column `text`,\r
 * respectively.\r
 *\r
 * @since 5.0.0\r
 */\r
Ext.define('Ext.view.MultiSelector', {\r
    extend: 'Ext.grid.Panel',\r
\r
    xtype: 'multiselector',\r
\r
    config: {\r
        /**\r
         * @cfg {Object} search\r
         * This object configures the search popup component. By default this contains the\r
         * `xtype` for a `Ext.view.MultiSelectorSearch` component and specifies `autoLoad`\r
         * for its `store`.\r
         */\r
        search: {\r
            xtype: 'multiselector-search',\r
            width: 200,\r
            height: 200,\r
            store: {\r
                autoLoad: true\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @cfg {String} [fieldName="name"]\r
     * The name of the data field to display in the primary column of the grid.\r
     * @since 5.0.0\r
     */\r
    fieldName: 'name',\r
\r
    /**\r
     * @cfg {String} [fieldTitle]\r
     * The text to display in the column header for the primary column of the grid.\r
     * @since 5.0.0\r
     */\r
    fieldTitle: null,\r
\r
    /**\r
     * @cfg {String} removeRowText\r
     * The text to display in the "remove this row" column. By default this is a Unicode\r
     * "X" looking glyph.\r
     * @since 5.0.0\r
     */\r
    removeRowText: '\u2716',\r
\r
    /**\r
     * @cfg {String} removeRowTip\r
     * The tooltip to display when the user hovers over the remove cell.\r
     * @since 5.0.0\r
     */\r
    removeRowTip: 'Remove this item',\r
\r
    emptyText: 'Nothing selected',\r
\r
    /**\r
     * @cfg {String} addToolText\r
     * The tooltip to display when the user hovers over the "+" tool in the panel header.\r
     * @since 5.0.0\r
     */\r
    addToolText: 'Search for items to add',\r
\r
    initComponent: function () {\r
        var me = this,\r
            emptyText = me.emptyText,\r
            store = me.getStore(),\r
            search = me.getSearch(),\r
            fieldTitle = me.fieldTitle,\r
            searchStore, model;\r
\r
        //<debug>\r
        if (!search) {\r
            Ext.raise('The search configuration is required for the multi selector');\r
        }\r
        //</debug>\r
\r
        searchStore = search.store;\r
        if (searchStore.isStore) {\r
            model = searchStore.getModel();\r
        } else {\r
            model = searchStore.model;\r
        }\r
\r
        if (!store) {\r
            me.store = {\r
                model: model\r
            };\r
        }\r
\r
        if (emptyText && !me.viewConfig) {\r
            me.viewConfig = {\r
                deferEmptyText: false,\r
                emptyText: emptyText\r
            };\r
        }\r
\r
        if (!me.columns) {\r
            me.hideHeaders = !fieldTitle;\r
            me.columns = [\r
                { text: fieldTitle, dataIndex: me.fieldName, flex: 1 },\r
                me.makeRemoveRowColumn()\r
            ];\r
        }\r
\r
        me.callParent();\r
    },\r
\r
    addTools: function () {\r
        this.addTool({\r
            type: 'plus',\r
            tooltip: this.addToolText,\r
            callback: 'onShowSearch',\r
            scope: this\r
        });\r
    },\r
\r
    convertSearchRecord: Ext.identityFn,\r
\r
    convertSelectionRecord: Ext.identityFn,\r
\r
    makeRemoveRowColumn: function () {\r
        var me = this;\r
\r
        return {\r
            width: 22,\r
            menuDisabled: true,\r
            tdCls: Ext.baseCSSPrefix + 'multiselector-remove',\r
            processEvent: me.processRowEvent.bind(me),\r
            renderer: me.renderRemoveRow,\r
            updater: Ext.emptyFn,\r
            scope: me\r
        };\r
    },\r
\r
    processRowEvent: function (type, view, cell, recordIndex, cellIndex, e, record, row) {\r
        if (e.type !== 'click') {\r
            return;\r
        }\r
\r
        if (Ext.fly(cell).hasCls(Ext.baseCSSPrefix + 'multiselector-remove')) {\r
            this.store.remove(record);\r
            if (this.searchPopup) {\r
                this.searchPopup.deselectRecords(record);\r
            }\r
        }\r
    },\r
\r
    renderRemoveRow: function () {\r
        return '<span data-qtip="'+ this.removeRowTip + '" role="button">' +\r
            this.removeRowText + '</span>';\r
    },\r
\r
    beforeDestroy: function() {\r
        Ext.un({\r
            mousedown: 'onDismissSearch',\r
            scope: this\r
        });\r
        this.callParent();\r
    },\r
\r
    privates: {\r
        onDismissSearch: function (e) {\r
            var searchPopup = this.searchPopup;\r
\r
            if (searchPopup && !(searchPopup.owns(e.getTarget()) || this.owns(e.getTarget()))) {\r
                Ext.un({\r
                    mousedown: 'onDismissSearch',\r
                    scope: this\r
                });\r
                searchPopup.hide();\r
            }\r
        },\r
\r
        onShowSearch: function (panel, tool) {\r
            var me = this,\r
                searchPopup = me.searchPopup,\r
                store = me.getStore();\r
\r
            if (!searchPopup) {\r
                searchPopup = Ext.merge({\r
                    owner: me,\r
                    field: me.fieldName,\r
                    floating: true\r
                }, me.getSearch());\r
                me.searchPopup = searchPopup = me.add(searchPopup);\r
\r
                // If we were configured with records prior to the UI requesting the popup,\r
                // ensure that the records are selected in the popup.\r
                if (store.getCount()) {\r
                    searchPopup.selectRecords(store.getRange());\r
                }\r
            }\r
\r
            searchPopup.showBy(me, 'tl-tr?');\r
            Ext.on({\r
                mousedown: 'onDismissSearch',\r
                scope: me\r
            });\r
        }\r
    }\r
});\r