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