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中引入。