关于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等等。