iteye_165
2010-04-10 10:40
浏览 464

怎么让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]

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • zhoujuan520 2010-04-12 11:02
    已采纳

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

    打赏 评论
  • Rooock 2010-04-11 02:54

    假设下拉框在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]

    打赏 评论
  • zhoujuan520 2010-04-12 10:56

    [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%'
    });
    }

    });

    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]

    打赏 评论

相关推荐 更多相似问题