欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

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

发布时间：2023/12/15 javascript 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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>

<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(); }); 创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

    总结

    以上是生活随笔为你收集整理的ExtJS中如何根据combobox的选值，动态地决定组件的显隐？的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。