当已经选择时隐藏组合框的值extjs
我在网格内有2个组合框。第二个组合框值将根据第一个组合框进行更改。
例如组合有3个项目:美国,欧洲,亚洲。
如果在第一个组合框中选择了欧洲,那么在第二个组合框中,欧洲不会再出现。
当已经选择时隐藏组合框的值extjs
我不知道我用它的ExtJS的版本,
但这里的代码:
我的组合STORE
我的组合INSIDE GRID
var set_approval_dtl = Ext.create('Ext.Window', {
title: title_approval2, width: 850, height: 395, rowdblclick: true, forceFit: true,
closeAction: "hide", store: ms_set_approval_dtl_store,
defaults: {
sortable: true, resizable: false
},
items: [
{xtype: "form", items: [
{layout: 'column', columnWidth: .5, itemId: 'set_approve', defaults: {border: false},
items: [{xtype: "panel", itemId: "set_approve_panel", height: 330, defaultType: 'textfield', margin: '0 10px 0 10px',
defaults: {labelWidth: 120, width: 850, maxLength: 200},
items: [
{xtype: "grid", itemId: "grid_items", width: 782, height: 280, margin: '0 10px 10px 10px', autoScroll: true,
plugins: Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1, pluginId: 'rowEditing'}),
store: ms_set_approval_dtl_store, stripeRows: true, defaultType: "gridcolumn",
viewConfig: {forceFit: true},
columns: [
{header: grid18j, width: 150, dataIndex: 'nm_act', align: 'center'},
{header: subtitle_approval3, width: 126, dataIndex: 'level1', align: 'center',
editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr1", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
listeners: {
expand: function(field, options, val) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
},
select: function(value) {
var obj = this.lastSelection[0].data;
return obj.nm;
this.lastSelection[0].hide;
cb_group.removeAt(0);
}
}},
renderer: function(val) {
var index = cb_group.findExact('id', val);
if (index !== -1) {
var rs = cb_group.getAt(index).data;
return rs.nm;
}
}
},
{header: subtitle_approval4, width: 126, dataIndex: 'level2', align: 'center', itemId: "level2",
editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr2", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
listeners: {
expand: function(field, options) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
}
}
},
select: function(value) {
var obj = this.lastSelection[0].data;
return obj.nm;
},
renderer: function(val) {
var index = cb_group.findExact('id', val);
if (index !== -1) {
var rs = cb_group.getAt(index).data;
return rs.nm;
}
}
}]
}]}
]}]}
]});
我试过this.lastSelection [0] .hide;和cb_group.removeAt(0);在第一个组合。但它根本不起作用。我不知道为什么我的选择监听器不工作。
请分享一些解决方案。谢谢
您将需要两个商店,每个组合框一个,两个商店都填充相同的数据。
然后你会做什么:
combo1.on('select',function(combo, newVal) {
combo2.getStore().filterBy(function(rec){
return rec.get("value")!=newVal;
})
});
您可以使用XTemplates来管理这种行为有一个商店和两个组合框。
首先,你必须为你的组合框的项目列表中创建一个XTemplate:
// displayfield = displayfield configured in your combobox
var template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
' <tpl if="[Ext.getCmp(\'combobox1\').getValue()] != id && [Ext.getCmp(\'combobox2\').getValue()] != id">',
' <div class="x-boundlist-item">{label}</div>',
' <tpl else>',
' <tpl if="id == null || id == \'\'">',
' <div class="x-boundlist-item">{label}</div>',
' <tpl else>',
' <div class="x-boundlist-item" style="font-size:0px; height:0px;"></div>',
' </tpl>',
' </tpl>',
'</tpl>'
);
的XTemplate包含一些语句,如果特定的值在组合框的一个已经被选择进行检查。如果不是,则该条目将出现在下拉列表中,否则将被隐藏。要使其工作,你必须设置在你的组合框模板和一些侦听器添加到他们:
// Combobox 1
{
xtype: 'combo',
id: 'combobox1',
store: 'your_store',
tpl: template,
displayField: 'label',
valueField: 'id',
listeners: {
beforeSelect: function (combo, record, index, eOpts)
{
// Check if the selected value is already selected in combobox2
var cbx2value = !!Ext.getCmp('combobox2').getValue() ? Ext.getCmp('combobox2').getValue() : '';
if (cbx2value != record.get('id') && cbx2value != record.get('id')) {
return true; // selected entry will be selected successfully
} else {
return false; // selected entry will not be selected
}
},
change: function()
{
// Get the picker (list of items) of the other combobox and refresh it's template state
var cbx2picker = Ext.getCmp('combobox2').getPicker();
cbx2picker.refresh();
}
}
// Combobox 2
{
xtype: 'combo',
id: 'combobox2',
store: 'your_store',
tpl: template,
displayField: 'label',
valueField: 'id',
listeners: {
beforeSelect: function (combo, record, index, eOpts)
{
// Check if the selected value is already selected in combobox2
var cbx1value = !!Ext.getCmp('combobox1').getValue() ? Ext.getCmp('combobox1').getValue() : '';
if (cbx1value != record.get('id') && cbx1value != record.get('id')) {
return true; // selected entry will be selected successfully
} else {
return false; // selected entry will not be selected
}
},
change: function()
{
// Get the picker (list of items) of the other combobox and refresh it's template state
var cbx1picker = Ext.getCmp('combobox1').getPicker();
cbx1picker.refresh();
}
}
这不是最终的解决办法,但我的项目之一,它的工作就像一个魅力。我尽可能简化了示例,使解决方案更加清晰。
感谢您的帮助!但似乎有些东西在我身上不起作用。我的萤火虫说Ext.getCmp(...)是不确定的。你能解释一下吗? – 2014-10-13 02:28:07
您尝试呼叫的组件之一不存在于给定的ID中。您还可以下载快速显示javascript错误的“web developer”插件。 – Tyr 2014-10-21 17:08:03
所以我必须为每个组合框2个商店? 以及我在哪里放置你上面提到的功能?外部var set_approval_dtl? – 2014-10-09 07:13:48
两个组合框中的每一个的一个商店总共是两个商店。您可以将我的函数放入'listeners:{select:function(combo,newVal)...',因为在组件上使用侦听器对象与使用'component.on()'相同。 – Alexander 2014-10-09 07:37:12
哦,所以每个组合框有不同的商店,但数据是相同的? 我不能只调用组合框名称。它在萤火虫上出现错误,说我的组合名称没有定义。 – 2014-10-09 07:41:31