Ext中同时隐藏field和label的方法

Ext中同时隐藏field和label的方法

       有时根据业务需要将组件进行隐藏，但往往实现后只是将文本框这类组件隐藏了，组件前面的label还在并没有隐藏。为此查询实验很多方法都没有成功，直到看到这篇文章，解决了问题，故对此问题进行总结。

参考实例：

function hideField(field)
    {
       field.disable();// for validation
       field.hide();
       field.getEl().up('.x-form-item').setDisplayed(false); // hide label
    }


    function showField(field)
    {
       field.enable();
       field.show();
       field.getEl().up('.x-form-item').setDisplayed(true);// show label
    }
        this.userTypeField=new Ext.ux.EnumField({
                hiddenName:'userinfo.userType',
                fieldLabel:'用户类型',
                tableName:'userinfo',
                fieldName:'userType',
                allowBlank : false,
                listeners:{
                        select:function(){
                                var value = this.getValue();
                                //Ext.log(value);
                                if(value == '2')
                                {
                                        //formPanel.stationidField.setVisible(false); //这种方法只能隐藏field而不能隐藏field                                             //formPanel.hospitalidField.setVisible(true);   对应的label,用下面的方法则可以一起隐藏.
                                        
                                        hideField(formPanel.stationidField);
                                        showField(formPanel.hospitalidField);
                                }
                                if(value == '3')
                                {
                                        //formPanel.hospitalidField.setVisible(false);
                                        //formPanel.stationidField.setVisible(true);
                                        hideField(formPanel.hospitalidField);                
                                        showField(formPanel.stationidField);                        
                                }
                                if(value == '1' || value == '4')
                                {
                                        //formPanel.hospitalidField.setVisible(true);
                                        //formPanel.stationidField.setVisible(true);                                        
                                        showField(formPanel.hospitalidField);
                                        showField(formPanel.stationidField);
                                }
                        }
                }
        });

说明：

注意红色部分代码：

第一个红色部分代码是隐藏组件的逻辑，包括label和文本框。

第二个红色部分代码是显示隐藏的组件逻辑，包括label和文本框。

其中对于field也就是formPanel.hospitalidField，换个写法是：

projectInfoForm.getForm().findField('swgcl').disable();
projectInfoForm.getForm().findField('swgcl').hide();
projectInfoForm.getForm().findField('swgcl').getEl().up('.x-form-item').setDisplayed(false);

两者是一样的。

转载自：http://scnujie.iteye.com/blog/210215