怎么让Combobox选择不同值显示不同的表单

我想做个效果,就是选择下拉框中某一项值就显示不同的表单.比如:我选择假期日期,下面就显示一个日期选择框.默认是一个textField...应该怎么做?如图.
[code="js"]
var queryCond=new Ext.form.ComboBox({fieldLabel:'查詢條件',hiddenName:'txtCond',
store:new Ext.data.SimpleStore({fields:['value','text'],data:[['holiday_name','假期名稱'],['holiday_date','假期日期'],['holiday_type','假期類型']]}),
mode:'local',triggerAction:'all',valueField:'value',displayField:'text',anchor:'50%',value:'holiday_name'
});

    queryCond.on('change',function(combox){
        var val=combox.getValue();
        if(val=='holiday_date'){
            queryKey=new Ext.form.DateField({fieldLabel:'請選擇日期',id:'holidaydate',name:'txtKey',anchor:'50%'});                
        }else if(val=='holiday_type'){
            queryKey=new Ext.form.ComboBox({fieldLabel:'<b>假期類型</b>',allowBlank:false,hiddenName:'txtKey',id:'holidaytype',
                store:new Ext.data.SimpleStore({fields:['value','text'],data:[['法定假日','法定假日'],['公司假','公司假'],['其他假日','其他假日']]}),
                mode:'local',triggerAction:'all',valueField:'value',displayField:'text',value:'法定假日',anchor:'25%'
            });
        }else{
            queryKey=new Ext.form.TextField({fieldLabel:'關鍵字',id:'holidayother',name:'txtKey',anchor:'80%'});
        }

    });

    var form=new Ext.form.FormPanel({
        bodyStyle:'padding:20px;',modal:true,id: 'holidayForm',labelWidth:100,labelAlign: 'right',
        url:'',border: false,defaultType: 'textfield',
        items:[queryCond,queryKey],
        buttons:[{text:'查詢',handler:''},{text:'取消',handler:function(){win.close();}}]
    });
    var win=new Ext.Window({
        title:'查詢假期窗口',modal:true,autoScroll:true,layout: 'fit',
        width:500,height:250,
        items:[form]
    });
    win.show();

[/code]

从你的代码中看出来,你碰到的问题是,你选择了日期,却不创建日期组件,当你从formpanel中移除某个组件或者增加某个组件后必须调用组件的容器的doLayout()方法,还有一定必须注意,某些布局是不支持增减组件的.譬如layout:'border'

假设下拉框在toolbar上.

文本或日历在panel上.

以下纯手打. 有错在所难免, 将就看吧.

[code="js"]
var combobox = new Ext.form.Combobox({
store: new Ext.data.JsonStore({
data: [[1, '文本框'], [1, '日历']]
,mode:'local'
,display:'name', inputValue:'id'
,field:[['id', 'name']]
,listeners:{
'beforeender': function(combobox){
combobox.setValue(1);
}
,'select': function(combobox, record, index){
// 得到选中数据的ID. 这里的id与field中的id一致.
var id = record.get('id');

                //   删除panel上已有的内容
                panel.remove('context');


                var context = null;                   

                //   根据id创建
                if(1 == id)
                {
                     //    id不能忘
                     context = new Ext.form.TextField({id:'context'});
                }else if(2 == id)
                {
                     context = new Other();
                }

                panel.add(context);
                panel.doLayout();
           }
     }
 })

})

var panel = new Ext.Panel({
autoHigth: true
,items:new Ext.form.textFiled({id:'context'});
});
[/code]

[code="js"]var queryCond = new Ext.form.ComboBox({
fieldLabel: '查詢條件',
hiddenName: 'txtCond',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['holiday_name', '假期名稱'],
['holiday_date', '假期日期'],
['holiday_type', '假期類型']
]
}),
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
anchor: '50%',
value: 'holiday_name'
});

queryCond.on('change', function (combox) {
var val = combox.getValue();
if (val == 'holiday_date') {
queryKey = new Ext.form.DateField({
fieldLabel: '請選擇日期',
id: 'holidaydate',
name: 'txtKey',
anchor: '50%'
});
} else if (val == 'holiday_type') {
queryKey = new Ext.form.ComboBox({
fieldLabel: '假期類型',
allowBlank: false,
hiddenName: 'txtKey',
id: 'holidaytype',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['法定假日', '法定假日'],
['公司假', '公司假'],
['其他假日', '其他假日']
]
}),
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
value: '法定假日',
anchor: '25%'
});
} else {
queryKey = new Ext.form.TextField({
fieldLabel: '關鍵字',
id: 'holidayother',
name: 'txtKey',
anchor: '80%'
});
}

});