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

來源：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>

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
   });

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();
});

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

jQuery EasyUI combobox多选及赋值、读取、回显
2019独角兽企业重金招聘Python工程师标准>>> html代码: <input class="easyui-combobox" name=" ...
解决Extjs中Combobox显示值和真实值赋值问题
用过Extjs的朋友相信都知道在Extjs的Combobox组件中是由两个值来组成的.一个是displayField这个是用来显示给我们看的,而另一个是真正给系统用的valueField,举个例子会 ...
php中多选提交如何获取,php中checkbox值获取，显示，多选值获取
php教程中checkbox值获取,显示,多选值获取最简单checkbox获取值代码 checkbox demo checkbox demo demonstrates checkboxes =&qu ...
ExtJs中ComboBox使用之技巧
在ExtJs中,想要提交ComboBox的Value,需要设置hiddenName: 1 xtype: 'combo', 2 ...
kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
ExtJs之数据和ComboBox控件
一.如何获取数据在ExtJs中获取数据主要靠下面四个类: Ext.data.DataProxy.Ext.data.Record.Ext.data.DataReader.Store.下面对这三个类做个 ...
extjs中bind_Extjs中常用表单介绍与应用
目标: 知道表单面板如何创建了解表单面板中xtype的类型的应用知道表单面板如何验证,绑定,取值综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的. ...
第六课,Extjs中常用表单介绍与应用
目标: 知道表单面板如何创建了解表单面板中xtype的类型的应用知道表单面板如何验证,绑定,取值综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的. ...
java 多选列表框_快逸报表：填报中的下拉多选列表框
在快逸报表应用的填报页面中,下拉框是最常见的了.下拉选择框可以简化用户的输入,可以避免用户的错误录入,还可以轻松实现中文与代码的映射关系,可谓用途多多. 可是随着业务的越来越复杂,各种奇怪的需求均可能 ...

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

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

最新文章

热门文章