如何在Ext JS中禁用组合框中的特定项?比如我有这些记录
row_1_type_1 row_2_type_2 row_3_type_3
我想禁用第三行,即它应该留在组合作为标签,但它会变灰,不能点击。
5jvtdoz21#
这里有一个解决方案,你至少可以在Ext JS 4.2.1中使用。这是一个插件,根据每条记录的值禁用boundlist中的某些项。可以配置用于检查是否应禁用列表项的字段的名称。让我们从如何使用插件开始。
{ xtype: 'combo', fieldLabel: 'My combo with disabled items', valueField: 'value', displayField: 'display', queryMode: 'local', store: { fields: ['value', 'display', 'disabled'], data: [{ value: 1, display: 'an enabled item', disabled: false },{ value: 2, display: 'a disabled item', disabled: true }] }, plugins: [{ ptype: 'comboitemsdisableable', disabledField: 'disabled' }] }
这是插件。
Ext.define('Ext.ux.plugin.ComboItemsDisableable', { extend: 'Ext.AbstractPlugin', alias: 'plugin.comboitemsdisableable', init: function (cmp) { var me = this; // the plugin me.disabledField = me.disabledField || 'disabled'; cmp.tpl = Ext.create('Ext.XTemplate', '<tpl for=".">', ' <tpl if="this.isDisabled(' + me.disabledField + ')">', ' <div class="x-boundlist-item x-item-disabled"><em>{' + cmp.displayField + '}</em></div>', ' <tpl else>', ' <div class="x-boundlist-item">{' + cmp.displayField + '}</div>', ' </tpl>', '</tpl>', { isDisabled: function(disabled) { return disabled; } } ); // make sure disabled items are not selectable cmp.on('beforeselect', function(combo, record, index) { return !record.get(me.disabledField); }); } });
这里有一些css来搭配这个插件。它灰出禁用的项目,并确保禁用的项目时,悬停不得到其背景改变,以建议它将是可选的。
.x-item-disabled.x-boundlist-item { color: #8c8c8c; cursor: default; } .x-item-disabled.x-boundlist-item-over { background: inherit; border-color: white; }
z31licg02#
你可以在listConfig上尝试一下:
listConfig
myItems: [ { name: 'row_1_type_1', disabled: false}, { name: 'row_2_type_2', disabled: false}, { name: 'row_3_type_3', disabled: true } ] listConfig: { getInnerTpl: function(displayField) { return Ext.create('Ext.XTemplate', '<ul><li role="option"', '<tpl for=".">', '<tpl if="disabled == true">', 'class="x-disabled-item"', '<tpl else>', 'class="x-custom-item"', '</tpl>', '>{#} - {name}</li></ul>' ); } } //CSS .x-disabled-item { } .x-custom-item { }
您可以在文档中找到有关模板的更多信息
m1m5dgzv3#
Ext6解决方案
Ext.application({ name: 'Fiddle', launch: function () { var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name', 'disabled'], data: [{ "abbr": "AL", "name": "Alabama", "disabled": '', }, { "abbr": "AK", "name": "Alaska", "disabled": 'x-item-disabled', }, { "abbr": "AZ", "name": "Arizona", "disabled": '', }] }); Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, queryMode: 'local', valueField: 'abbr', renderTo: Ext.getBody(), // Template for the dropdown menu. // Note the use of the "x-list-plain" and "x-boundlist-item" class, // this is required to make the items selectable. tpl: Ext.create('Ext.XTemplate', '<ul class="x-list-plain"><tpl for=".">', '<li role="option" class="x-boundlist-item {disabled}">{abbr} - {name}</li>', '</tpl></ul>' ), // template for the content inside text field displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{abbr} - {name}', '</tpl>' ) }); } });
在这里尝试代码https://fiddle.sencha.com/#view/editor
3条答案
按热度按时间5jvtdoz21#
这里有一个解决方案,你至少可以在Ext JS 4.2.1中使用。这是一个插件,根据每条记录的值禁用boundlist中的某些项。可以配置用于检查是否应禁用列表项的字段的名称。
让我们从如何使用插件开始。
这是插件。
这里有一些css来搭配这个插件。它灰出禁用的项目,并确保禁用的项目时,悬停不得到其背景改变,以建议它将是可选的。
z31licg02#
你可以在
listConfig
上尝试一下:您可以在文档中找到有关模板的更多信息
m1m5dgzv3#
Ext6解决方案
在这里尝试代码https://fiddle.sencha.com/#view/editor