动态改变filelable的值

[70]动态改变fieldLabel的值

2009年09月09日   评论(4 )|浏览(243 )点击查看原文

如题,如何在程序运行时动态地改变fieldLabel的值?

这个问题是今天群里有朋友问的.我帮他解决后就想着把它记录下来,如果再有人想实现这样的效果,就不用花太多时间自己去琢磨了.好久没有写Extjs日志了,好久没有花时间去研究Extjs了,再次拿起来的时候,感觉很生疏,如果有不对的地方,请看过的朋友多多指点.

原理我也不想多讲了,直接看代码吧,相信效果实现后,再来想原理就容易明白许多.

changeLabel.html源码如下:

 

和以前的风格一样,这个文件的作用仅是引入Extjs的支持类库等,同时还定义了一个层divPanel.

changeLabel.js的代码如下:

 

本文的核心就在changeLabel.js我选中的那几行代码上,这里做个简单的解释:

　　　select:function(combo,record,index){

　　　　if(combo.value==1)

　　　　　　Ext.query("*[for=txtTest]")[0].innerHTML = "客户:";

　　　　else

　　　　　　Ext.query("*[for=txtTest]")[0].innerHTML = "承运人:";

　　}绑定"合同类型"下拉列表框的select事件,当用户做出选择的时候,下面文本框(txtTest)的fieldLabel会相应地改变,如:

　　1> "合同类型"选择"承运人合约"项,下面文本框的fieldLabel值为"承运人:";

　　2> "合同类型"选择"客户合约"项,下面文本框的fieldLabel值为"客户:";

要注意的是:

　　Ext.query("*[for=txtTest]")[0].innerHTML = "客户:";

上面这行代码中的"txtTest"对应于文本框定义时的id:'txtTest'.

下面来看运行效果截图:

图1:页面加载完成后的默认界面截图:

　　　　

图2:当"合同类型"选择"承运人合约"项时,下面的文件框的fieldLabel变为"承运人":

　　　　图3:当"合同类型"选择"客户合约"项时,下面的文件框的fieldLabel变为"客户":

 

思路: 查看Extjs动态生成的html代码 <LABEL class=x-form-item-label style="WIDTH: 60px" for=txtTest>客户:</LABEL>

<DIV class=x-form-element id=x-form-el-txtTest style="PADDING-LEFT: 65px">

<INPUT class=" x-form-text x-form-field" id=txtTest style="WIDTH: 117px" name=txtTest autocomplete="off">

</DIV>上面的代码对应于图形上的 ,我想看到这里,大家对为什么在定义文本框的时候需要加上id:'txtTest'就很明白了吧,因为定义了id,在生成的html中label属性里就会有for=txtTest,这样就能帮助我们准确定位到fieldLabel(LABEL),就能很方便地通过Ext.query来筛选出相应的LABEL(fieldLabel),从而改变它的值.即:

　　Ext.query("*[for=txtTest]")[0].innerHTML = "客户:";

说明:上面Ext.query返回的是所有包含属性for并且值为txtTest的html元素

柳峰 QQ:58472399 动态改变表单元素配置项fieldLabel的值?