Javascript Extjs 表单，在组合选择上动态显示/隐藏字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11087165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs Form with dynamically shown/hidden fields on combo selection
提问by sasklacz
Using Ext 4.1 I'd like to create a form with select combo, and depending on the currently selected option different subfields would be shown/hidden. Example below :
使用 Ext 4.1 我想创建一个带有选择组合的表单，并且根据当前选择的选项不同的子字段将被显示/隐藏。下面的例子：
Right now I have a combo and a set of two date fields that are hidden on render. When a combo value is changed I have an event listener that will display those fields. But I'm not sure if it's the best method to tackle this. Would a fieldset work better in this case ?
现在我有一个组合和一组在渲染时隐藏的两个日期字段。当组合值更改时，我有一个事件侦听器将显示这些字段。但我不确定这是否是解决这个问题的最佳方法。在这种情况下，字段集会更好吗？
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
initComponent: function(){
this.on('afterrender', this.onAfterRender, this);
this.callParent(arguments);
},
onAfterRender: function(){
this.items.each(function(item){
item.on('change', this.onChange, this);
}, this);
},
onChange: function(field, newValue){
if (field.name === 'range'){
switch(newValue){
case 'fit':
console.log('fit view');
break;
case 'complete':
console.log('complete view');
break;
case 'date range':
console.log('date range view');
break;
}
}
},
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: me.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden:true,
}
]
});
回答by Evan Trimboli
Something along these lines:
沿着这些路线的东西：
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
rangeFieldLabel: 'Foo',
initComponent: function() {
Ext.apply(this, {
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [{
itemId: 'range',
width: 50,
xtype: 'combo',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: this.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
}, {
itemId: 'dateFrom',
width: 50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
}, {
itemId: 'dateTo',
width: 50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden: true,
}]
});
this.callParent(arguments);
this.child('#range').on('change', this.onChange, this);
},
onChange: function(field, newValue) {
switch(newValue) {
case 'fit':
console.log('fit view');
// do something else
break;
case 'complete':
this.child('#dateFrom').hide();
this.child('#dateTo').hide();
break;
case 'date range':
this.child('#dateFrom').show();
this.child('#dateTo').show();
break;
}
},
});
Ext.onReady(function(){
new TooltipForm({
renderTo: document.body
});
});
