extjs中第一次访问有效，第二次访问出现部分组件无法显示的，动态改变组件的label值的方法，ExtJs中组件最好少使用ID属性（推荐更多使用Name属性）

时间：2022-01-07 21:27:35

在公司做的一个OA项目中，曾经就遇到了这样的一个问题：（我是在jsp中的div中将js render到div中去的）第一次访问此界面的时候，formpanel上的组件能正常显示，不刷新整个页面的前提下，再次进入到这个界面时，出现了部分组件不能正常显示）。后来经过在网上查找资料发现，那些组件没有显示出来的，是我使用了id去获取组件的对象导致的。我把改成name就可以了。具体如下：

{

            border : false,

            columnWidth : /*.32*/.50,

            layout : "form",

            labelWidth : 1,

            labelSeparator : " ",

            items : [{

                    xtype : 'combo',

                    //id : 'freeleadidea'+xtoffice_deal_freeidstring,//id值必须是动态变化的，否则第二次访问无效,如果不想用动态的，就直接用name就可以了

                    name : 'selectleadname',

                    store : [['同意。', '同意。'],['已阅。', '已阅。'], ['拟同意。', '拟同意。'], ['同意拟办意见。', '同意拟办意见。']], 
                    forceSelection : true,

                    triggerAction : 'all',

                    mode : 'local',

                    readOnly : true,

                    emptyText : /*'请选择'*/'选择常用审批语',

                    width : 180,

                    listeners : {

                        select : function() {

                            xtoffice_deal_batchsuggest.setValue(xtoffice_deal_leadidea.getValue());

                        }

                    }

                }]

        }

只贴出了部分代码。

在onready()中获取该组件的方式：

//xtoffice_deal_leadidea = xtoffice_workflow_freedealform.findById("freeleadidea");（一般不要用id属性获取，后面下文会有说明）
 xtoffice_deal_leadidea = xtoffice_workflow_freedealform.getForm().findField("selectleadname");


2.如何动态的改变label的值：
 1.根据控件的id改变控件的fieldLabel值

// 动态改变fieldLabel的值; 
Ext.DomQuery.selectNode('label[for=labeltext'+xtoffice_deal_idstring+']').innerHTML = 草拟意见+':';
Ext.DomQuery.selectNode('label[for=labeltextman'+xtoffice_deal_idstring+']').innerHTML = '草拟人 :';

for中的labeltext'+xtoffice_deal_idstring+'是该组件的动态id值。我在项目中遇到了上述上的问题，而这里就是用了一个动态的id呗。

2.根据combox的值，动态改变combox自己的fieldLabel的值
Ext.onReady(function() {   
    new Ext.form.FormPanel({   
         renderTo : Ext.getBody(),   
         items : [new Ext.form.TimeField({   
             id : 'time',   
             fieldLabel : 'Time',   
             name : 'time',   
             minValue : '8:00am',   
             maxValue : '6:00pm',   
             listeners : {   
                'select' : function(combo, record, index) {   
                    var msg = "";   
                    var a = combo.el.parent().parent().parent().first();   
                    for(var dd in a){   
                         msg += dd + " ";   
                     }   
                     a.dom.innerHTML = combo.getValue() + ":";   
                 }   
                   
             }   
         })]   
     });   
})  
 
 关于在ExtJs中，ID属性最好少使用情况说明：

因为在不为组件指定ID的情况下，默认为其自动分配id；如果手动指定ID，系统就会以此为准。

但是往往在系统中，尤其是使用TabPanel的情况下，一下加载了多个JS页面，很容易出现多个组件使用重复的一个ID都情况，当关闭某个tab页，却因为别的tab页存在相同id的组件无法销毁该页面组件；而且在使用Ext.getCmp获取组件时候出问题--往往得不到我们想要的效果（比如Ext.getCmp后重置该组件的值，却无效）。

因此，建议在Ext中少使用ID属性。

1. 如果必须使用ID属性，建议ID值用父组件ID+子组件ID的形式来指定子组件的ID；

2. 建议使用

FormPanel.getForm().findField('id/name');

或者

Ext.get('id/name');

来替代

Ext.getCmp('id')获取组件。

3. 或者定义组件为变量，然后在FormPanel或者GridPanel中引入。

相关文章