/** * This component provides a grid holding selected items from a second store of potential * members. The `store` of this component represents the selected items. The "search store" * represents the potentially selected items. * * While this component is a grid and so you can configure `columns`, it is best to leave * that to this class in its `initComponent` method. That allows this class to create the * extra column that allows the user to remove rows. Instead use `{@link #fieldName}` and * `{@link #fieldTitle}` to configure the primary column's `dataIndex` and column `text`, * respectively. * * @since 5.0.0 */Ext.define('Ext.view.MultiSelector', { extend: 'Ext.grid.Panel', xtype: 'multiselector', config: { /** * @cfg {Object} search * This object configures the search popup component. By default this contains the * `xtype` for a `Ext.view.MultiSelectorSearch` component and specifies `autoLoad` * for its `store`. */ search: { xtype: 'multiselector-search', width: 200, height: 200, store: { autoLoad: true } } }, /** * @cfg {String} [fieldName="name"] * The name of the data field to display in the primary column of the grid. * @since 5.0.0 */ fieldName: 'name', /** * @cfg {String} [fieldTitle] * The text to display in the column header for the primary column of the grid. * @since 5.0.0 */ fieldTitle: null, /** * @cfg {String} removeRowText * The text to display in the "remove this row" column. By default this is a Unicode * "X" looking glyph. * @since 5.0.0 */ removeRowText: '\u2716', /** * @cfg {String} removeRowTip * The tooltip to display when the user hovers over the remove cell. * @since 5.0.0 */ removeRowTip: 'Remove this item', emptyText: 'Nothing selected', /** * @cfg {String} addToolText * The tooltip to display when the user hovers over the "+" tool in the panel header. * @since 5.0.0 */ addToolText: 'Search for items to add', initComponent: function() { var me = this, emptyText = me.emptyText, store = me.getStore(), search = me.getSearch(), fieldTitle = me.fieldTitle, searchStore, model; //<debug> if (!search) { Ext.raise('The search configuration is required for the multi selector'); } //</debug> searchStore = search.store; if (searchStore.isStore) { model = searchStore.getModel(); } else { model = searchStore.model; } if (!store) { me.store = { model: model }; } if (emptyText && !me.viewConfig) { me.viewConfig = { deferEmptyText: false, emptyText: emptyText }; } if (!me.columns) { me.hideHeaders = !fieldTitle; me.columns = [ { text: fieldTitle, dataIndex: me.fieldName, flex: 1 }, me.makeRemoveRowColumn() ]; } me.callParent(); }, addTools: function() { var me = this; me.addTool({ type: 'plus', tooltip: me.addToolText, callback: 'onShowSearch', scope: me }); me.searchTool = me.tools[me.tools.length - 1]; }, convertSearchRecord: Ext.identityFn, convertSelectionRecord: Ext.identityFn, makeRemoveRowColumn: function() { var me = this; return { width: 32, align: 'center', menuDisabled: true, tdCls: Ext.baseCSSPrefix + 'multiselector-remove', processEvent: me.processRowEvent.bind(me), renderer: me.renderRemoveRow, updater: Ext.emptyFn, scope: me }; }, processRowEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) { var body = Ext.getBody(); if (e.type === 'click' || (e.type === 'keydown' && (e.keyCode === e.SPACE || e.keyCode === e.ENTER))) { // Deleting the focused row will momentarily focusLeave // That would dismiss the popup, so disable that. body.suspendFocusEvents(); this.store.remove(record); body.resumeFocusEvents(); if (this.searchPopup) { this.searchPopup.deselectRecords(record); } } }, renderRemoveRow: function() { return '<span data-qtip="' + this.removeRowTip + '" role="button" tabIndex="0">' + this.removeRowText + '</span>'; }, onFocusLeave: function(e) { this.onDismissSearch(); this.callParent([e]); }, afterComponentLayout: function(width, height, prevWidth, prevHeight) { var me = this, popup = me.searchPopup; me.callParent([width, height, prevWidth, prevHeight]); if (popup && popup.isVisible()) { popup.showBy(me, me.popupAlign); } }, privates: { popupAlign: 'tl-tr?', onGlobalScroll: function(scroller) { // Collapse if the scroll is anywhere but inside this selector or the popup if (!this.owns(scroller.getElement())) { this.onDismissSearch(); } }, onDismissSearch: function(e) { var searchPopup = this.searchPopup; if (searchPopup && (!e || !(searchPopup.owns(e.getTarget()) || this.owns(e.getTarget())))) { this.scrollListeners.destroy(); this.touchListeners.destroy(); searchPopup.hide(); } }, onShowSearch: function(panel, tool, event) { var me = this, searchPopup = me.searchPopup, store = me.getStore(); if (!searchPopup) { searchPopup = Ext.merge({ owner: me, field: me.fieldName, floating: true, alignOnScroll: false }, me.getSearch()); me.searchPopup = searchPopup = me.add(searchPopup); // If we were configured with records prior to the UI requesting the popup, // ensure that the records are selected in the popup. if (store.getCount()) { searchPopup.selectRecords(store.getRange()); } } searchPopup.invocationEvent = event; searchPopup.showBy(me, me.popupAlign); // It only autofocuses its defaultFocus target if it was hidden. // If they're reactivating the show tool, they'll expect to focus the search. if (!event || event.pointerType !== 'touch') { searchPopup.lookupReference('searchField').focus(); } me.scrollListeners = Ext.on({ scroll: 'onGlobalScroll', scope: me, destroyable: true }); // Dismiss on touch outside this component tree. // Because touch platforms do not focus document.body on touch // so no focusleave would occur to trigger a collapse. me.touchListeners = Ext.getDoc().on({ // Do not translate on non-touch platforms. // mousedown will blur the field. translate: false, touchstart: me.onDismissSearch, scope: me, delegated: false, destroyable: true }); } }});