Javascript 在组合选择上具有动态显示/隐藏字段的Extjs表单
使用Ext4.1,我想用select combo创建一个表单,根据当前选择的选项,不同的子字段将显示/隐藏。示例如下: 现在我有一个组合和一组隐藏在渲染上的两个日期字段。当一个组合值被更改时,我有一个事件监听器来显示这些字段。但我不确定这是否是解决这个问题的最佳方法。在这种情况下,实地调查会更好吗Javascript 在组合选择上具有动态显示/隐藏字段的Extjs表单,javascript,forms,extjs,extjs4,extjs4.1,Javascript,Forms,Extjs,Extjs4,Extjs4.1,使用Ext4.1,我想用select combo创建一个表单,根据当前选择的选项,不同的子字段将显示/隐藏。示例如下: 现在我有一个组合和一组隐藏在渲染上的两个日期字段。当一个组合值被更改时,我有一个事件监听器来显示这些字段。但我不确定这是否是解决这个问题的最佳方法。在这种情况下,实地调查会更好吗 Ext.define('TooltipForm', { extend: 'Ext.form.Panel', layout: { type: 'vbox',
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,
}
]
});
大致如下:
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
});
});
显示和隐藏对我来说不是问题。我的问题是,带有allowBlank:false的隐藏字段会导致form.isValid()返回false。是否有办法使隐藏字段不参与验证过程?禁用该字段将阻止其验证。我很惊讶ext不支持通过hidden属性进行验证。理想情况下,框架应该承担起做这些事情的责任