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

Question

我想做个效果,就是选择下拉框中某一项值就显示不同的表单.比如:我选择假期日期,下面就显示一个日期选择框.默认是一个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]

Answer 1

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