170
rated 0 times
[
172]
[
2]
/ answers: 1 / hits: 22910
/ 12 Years ago, mon, june 18, 2012, 12:00:00
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 :
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,
}
]
});
More From » forms
