如何显示基于组合框选择在ExtJS的
问题描述:
这里,面板是我的代码:如何显示基于组合框选择在ExtJS的
{
xtype: 'combo',
width: 150,
value: 'select last..',
store: new Ext.data.SimpleStore({
data: [
[0, 'first'],
[1, 'second'],
[2, 'third']
],
id: 0,
fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false,
name: 'lastComboSelection',
itemId: 'lastCombo',
listeners: {
change: function (combo, newValue, oldValue) {
//based on selection want to display a panel
}
}
},{
xtype: 'firstPanel',
name: 'first text field'
},{
xtype: 'SecondPanel',
name: 'second text field '
},{
xtype: 'thirdPanel',
name: 'last text field '
}
答
下面是更改方法通过组合选择面板
这里是简单的小提琴例子fiddle
问候: 萨勒曼·哈桑:)
listeners: {
change: function(combo, newVal, oldVal, eOpts) {
if (newVal == 'Select Panel 1') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].show();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide();
} else if (newVal == 'Select Panel 2') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].show();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide();
} else if (newVal == 'Select Panel 3') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].show();
}
}
}
答
如果您使用的Ext JS 5.0版或以上,则组合框的选择属性绑定到activeItem与面板作为其子项的容器的属性。此容器的布局为卡片。例如:
Ext.define('OnlyOnePanel', {
extend: 'Ext.panel.Panel',
viewModel: {},
layout: 'vbox',
items: [{
xtype: 'combobox',
width: 150,
emptyText: 'Select..',
store: new Ext.data.SimpleStore({
data: [
[0, 'first'],
[1, 'second'],
[2, 'third']
],
fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
value: 'first',
triggerAction: 'all',
editable: false,
name: 'lastComboSelection',
itemId: 'lastCombo',
bind: {
selection: '{selectedItem}'
}
}, {
xtype: 'container',
layout: 'card',
bind: {
activeItem: '{selectedItem.value}'
},
items: [{
xtype: 'panel',
html: 'First Panel'
}, {
xtype: 'panel',
html: 'Second Panel'
}, {
xtype: 'panel',
html: 'Third Panel'
}]
}]
});
检查这个fiddle。
您使用的是什么版本的ExtJS? – scebotari66