extjs 显示与影藏控件

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

原创最新推荐文章于 2021-11-30 18:19:52 发布 · 953 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #validation #border #function #layout

java web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用ExtJS实现一个组合框与日期时间字段的联动效果。当选择不同的发送方式时，日期时间字段会相应地显示或隐藏，并调整其验证状态。文章详细展示了组合框和日期时间字段的配置选项及其交互逻辑。

var checkflag=new Ext.form.ComboBox({
                        hiddenName : 'checkflag',
                        id :'checkflag1',
                        fieldLabel : '发送方式',
                        triggerAction : 'all',
                        emptyText : '请选择',
                        store : new Ext.data.SimpleStore({
                                    fields : ['name', 'code'],
                                    data : [['即时发送', '0'], ['定时发送', '1']]
                                }),
                        displayField : 'name',
                        valueField : 'code',
                        mode : 'local',
                        value : '0',
                        forceSelection : true, // 选中内容必须为下拉列表的子项
                        editable : false,
                        allowBlank : false,
                        typeAhead : true,
                        resizable : true,
                        anchor : '100%'
                    });
            
            checkflag.on('select', function() {
                var value = checkflag.getValue();
                if(value==1){
                    Ext.getCmp('sendtime').enable();// for validation
                    Ext.getCmp('sendtime').show();
                    Ext.getCmp('sendtime').getEl().up('.x-form-item').setDisplayed(true); 
                }else if(value==0){
                    Ext.getCmp('sendtime').disable();// for validation
                    Ext.getCmp('sendtime').hide();
                    Ext.getCmp('sendtime').getEl().up('.x-form-item').setDisplayed(false); 
                }
            });

                                          {
								columnWidth : .33,
								layout : 'form',
								labelWidth : 60, // 标签宽度
								defaultType : 'textfield',
								border : false,
								items : [{
										  	xtype : 'datetimefield',
											fieldLabel : '发送时间', // 标签
											id	: 'sendtime',
											name : 'sendtime', // name:后台根据此name属性取值 
											format:'Y-m-d', //日期格式化
										//	hidden : true ,
											allowBlank : false,
											maxValue:'2099-12-31', //允许选择的最大日期
											minValue:'2011-01-01', //允许选择的最小日期
											anchor : '100%' // 宽度百分比
										}
										]
							}