ExtJS中如何根据combobox的选值，动态地决定组件的显隐？

最新推荐文章于 2021-11-30 18:19:52 发布

xyzroundo

最新推荐文章于 2021-11-30 18:19:52 发布

阅读量1.3k

点赞数

文章标签： extjs 报表 function stylesheet border layout

來源：http://www.javaeye.com/problems/3168

ExtJS所做的Form，需要根据combobox选择值，来决定后面所显示的组件。办法是动态地加在FormPanel中的items中。

如果选择年报表，则下面的可选的条件输入框只有年。

如果选择日报表，则可选的条件输入框只有日期。

如果选择月报表，则可选的条件输入框有年和月两项。

但下面的代码在实际中，第一次选月报表，显示年和月两项，第二次选年报表，却不会隐藏月这项。

请教下面的代码问题出现在哪？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查询选择框</title>
   <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
   <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="ExtJS/ext-all.js"></script>
   <script type="text/javascript" src="ExtJS/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'resources/s.gif';
Ext.onReady(function(){
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side';

   // 选择框
   var reportCategory = new Ext.form.ComboBox({
       fieldLabel: '报表类型',
       hiddenName:'reportCategory1',
       store: new Ext.data.SimpleStore({
           fields: ['num', 'name'],
           data : [[1,'年报表'],[2,'月报表'],[3,'日报表']]
       }),
       valueField:'num',
       displayField:'name',
       typeAhead: true,
       mode: 'local',
       triggerAction: 'all',
       emptyText:'请选择...',
       selectOnFocus:true,
       width:120
   });

   var dtYear = new Ext.form.NumberField({
       fieldLabel:'年',
       name:'dtYear1',
       allowBlank:false,
       allowDecimals:false,
       allowNegative:false,
       value:2008,
       minValue:2000,
       maxValue:2100,
       selectOnFocus:true,
       validationEvent:false,
       width:120
   });

   var dtMonth = new Ext.form.NumberField({
       fieldLabel:'月',
       name:'dtMonth1',
       allowBlank:false,
       allowDecimals:false,
       allowNegative:false,
       minValue:1,
       maxValue:12,
       selectOnFocus:true,
        validationEvent:false,
       width:120
   });

   var dtDay = new Ext.form.DateField({
       fieldLabel: '日期',
       name: 'dtDay1',
       width:120,
       validationEvent:false,
       allowBlank:false
   });

   var fs = new Ext.form.FormPanel({
       frame: true,
       labelAlign: 'right',
       labelWidth: 60,
       autoHeight:true,
       autoWidth:true,
       onSubmit: Ext.emptyFn,
       submit: function(){
           this.getEl().dom.method='POST';
           this.getEl().dom.action='search.jsp';
           this.getEl().dom.submit();
       },
       waitMsgTarget: true,
       items: reportCategory
   });

   fs.addButton('确定', function(){
       fs.getForm().submit();
   });

    reportCategory.on('select',function(combo, record, index){
       fs.items.clear(); // 将items清除，希望同步到页面，却不成功。
       fs.items.add(reportCategory);
       switch (newv) {
           case 0: // 年报表, 选择年
               fs.items.add(dtYear);
               break;
           case 1: // 月报表, 选择年和月
               fs.items.add(dtYear);
               fs.items.add(dtMonth);
               break;
           case 2: // 日报表, 选择具体日期
               fs.items.add(dtDay);
               break;
       }
       fs.doLayout(); // 问题: 此处显示add的，但对原来的clear前的组件并不清除？
   });

   var window = new Ext.Window({
       title:'查询对话框',
       width:260,
       autoHeight:true,
       resizable:false,
       layout: 'fit',
       plain:true,
       closable:false,
       border:false,
       modal:true,
       items: fs
   });
   window.show();
});

</script>

</body>
</html>

你可以这样子啊，不要清除旧的items，而是设置可见与否：

Java代码

reportCategory.on('select',function(combo, record, index){
fs.items.clear(); // 将items清除，希望同步到页面，却不成功。
fs.items.add(reportCategory);
switch (newv) {
case 0: // 年报表, 选择年
dtYear.setVisible(true);
dtMonth.setVisible(false);
dtDay.setVisible(false);
break;
case 1: // 月报表, 选择年和月
dtYear.setVisible(true);
dtMonth.setVisible(true);
dtDay.setVisible(false);
break;
case 2: // 日报表, 选择具体日期
dtYear.setVisible(false);
dtMonth.setVisible(false);
dtDay.setVisible(true);
break;
}
fs.doLayout();
});

    reportCategory.on('select',function(combo, record, index){
        fs.items.clear(); // 将items清除，希望同步到页面，却不成功。
        fs.items.add(reportCategory);
        switch (newv) {
            case 0:  // 年报表, 选择年
                dtYear.setVisible(true);
                dtMonth.setVisible(false);
                dtDay.setVisible(false);
                break;
            case 1:  // 月报表, 选择年和月
                dtYear.setVisible(true);
                dtMonth.setVisible(true);
                dtDay.setVisible(false);
                break;
            case 2: // 日报表, 选择具体日期
                dtYear.setVisible(false);
                dtMonth.setVisible(false);
                dtDay.setVisible(true);
                break;
        }
        fs.doLayout(); 
    });