关于ExtJS控件的fieldLabel配置项的小知识点

1、fieldLabel配置项的运算性：

      我们都知道，fieldLabel配置项一般都是接收文字性的字符串，很少有用运算模式来赋值的情况，即如下情况：

var Fee = new Ext.form.ComboBox({fieldLabel:(Ext.getCmp('Test').getValue()==true?'FieldLabel':'<font color=red>FieldLabel</font>'),id:'Fee',name:'Fee'});

      那么，这种赋值方式在何种情况下将使用到呢？

      我们来看如下的需求：

      现在有一个ExtJS所写的面板，在面板中需要有一个CheckBox和一个TextField控件，并且需要TextField的fieldLabel配置项的内容随CheckBox被点击时的值变化而变化，那么在初次渲染的时候，我们就可以根据需求做这样的一个赋值方式，当然也还会有其他的赋值方式，欢迎指点。当然CheckBox被点击的函数是另外一回事情，即接下来的第二个小点。

2、如何改变fieldLabel的值？

      在平常的工作中，很少会遇到改变控件的fieldLabel值的情况，除非是要求那种需要动态变化的需求。

      那么，当真的遇到那种情况，该怎么做呢？有没有一个好的方式？

      我们都知道，在ExtJS的整个框架中，都没有提供一个可以修改fieldLabel值的方法，比如：类似的setXXXValue()的方法，那该如何处理？

      思路：ExtJS控件----->被解析(推荐Firefox)------>HTML------->被解析后的HTML结构分析

      例如：如下的控件定义：

var SubTypeFee = new Ext.form.ComboBox({fieldLabel:'子分类',id : 'SubTypeFee',name : 'SubTypeFee'});

      在此定义了一个下拉的ComboBox控件，我们看看在Firefox中被解析成了什么结构：

      从图片中我们可以看到，被解析成了三层结构：

      第一层：id="ext-gen585"的一个<label>元素以及一个id="x-form-el-SubTypeFee"的<div>元素；

      第二层：id="ext-gen586"的一个<div>元素；

      第三层：id="SubTypeFee"的一个<input>元素；

      从这三层结构我们知道，<label>的结构级别是<input>的父级的父级。

      接下来，看一个工作中的实例：

      第一：定义控件：

var SubTypeFee = new Ext.form.ComboBox({fieldLabel:(Ext.getCmp('Test').getValue()==true?'子分类':'<font color=red>子分类</font>'),id : 'SubTypeFee',name : 'SubTypeFee'});

var Test = new Ext.form.Checkbox({fieldLabel:'Checkbox',id:'Test',name:'Test',checked:false,listeners:{'check':function(checked){if(checked.checked){document.getElementById('SubTypeFee').parentNode.parentNode.previousSibling.innerHTML="子分类:"; SubTypeFee.setValue("");SubTypeFee.setRawValue("");SubTypeFee.disable();}else{document.getElementById('SubTypeFee').parentNode.parentNode.previousSibling.innerHTML="<font color=red>子分类</font>:"; SubTypeFee.enable();}}}});

       第二步：当需求要求点击CheckBox时，ComboBox控件的fieldLabel值的颜色出现变化，以便提醒用户在操作时，什么情况下该ComboBox是必输入项，什么时候是非必输入项。看代码：

document.getElementById('SubTypeFee')

       此代码将根据控件的Id获取到控件。

document.getElementById('SubTypeFee').parentNode.parentNode.previousSibling

       此代码将获取到控件的fieldLabel的被解析级别，即上面我们提到的第一层结构。

       接下来，我们就可以通过HTML的innerHTML属性来制定该控件的值域了，即：

document.getElementById('SubTypeFee').parentNode.parentNode.previousSibling.innerHTML="子分类:"; 

       操作结束。

       注：1、不同控件的布局深度不同，解析之后的结构层级不同，所以要根据解析之后的层级结构才能确定<label>与<input>的Dom关系；

               2、在做更改控件的fieldLabel配置项之前，要保证该控件已经被渲染到窗体中；

               3、不只是fieldLabel配置项具有运算性，还有很多配置都有这样的特点，比如：sm、cm等等。