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

在公司做的一个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中引入。