关于extjs控件的id和样式的研究

extjs中包含了大量的控件，我们用的时候会发现这些控件的id和样式太难把握了，粗略看上去好像没有什么规律性，这也让我们为使用控件的应用程序写自动化测试带来了难题。其实，这些控件的id和样式是有规律的。

比方说：我们最简单的面板控件，他的样式和id可能如下所示：

其实这个控件id和样式是非常有规律的，如果仔细研读过源代码，可以发现每个都用模板语言写了一个模板，然后控件的id,样式生成规则都是在模板中定义的。

比如panel控件的模板定义如下：

1. '<div id="{id}-body"   
2.       class="{baseCls}-body  
3.       <tpl if="bodyCls"> {bodyCls}</tpl>',  
4.       ' {baseCls}-body-{ui}  
5.       <tpl if="uiCls">',  
6.             '<tpl for="uiCls">   
7.                 {parent.baseCls}-body-{parent.ui}-{.}     
8. </tpl>',  
9.       '</tpl>"  
10.        <tpl if="bodyStyle"> 
11.            style="{bodyStyle}" 
12.        </tpl>>',  
13. '</div>' 

从这里我们看出，任何一个控件的id总是我们赋值给他的id然后加上“-body"后缀，这个id是怎么来的呢？它是你在创建这个组件时候给他分配的值：比如：clusterstab,否则的话，它就会用Ext.id来自动生成一个。比如，我们的例子中，id是自己分配的：

1. this.control({  
2. 'mainPanel':{  
3.     afterrender:function(){  
4.       scope.thisTab='clusterstab';  
5.       Ext.getCmp('clusterstab').add(ext.create('widget.contentPanel',{  
6.     id: scope.thisTab+'Panel',  
7.     showType:scope.thisTab  
8. })); 

见第4行和6行可以解释为什么我们的例子中控件id叫做clustertabPanel-body.

下面来谈谈样式的生成：

因为控件的复杂性，所以一个控件的样式也许有多个组成部分，我们逐一来看。

基本样式：如第2行，是${baseCls}-body,这个${baseCls}是取决于控件的类型，每个控件都有自己的定义，比如panel的样式的baseCls如下：

1. baseCls : Ext.baseCSSPrefix + 'panel', 

而这个Ext.baseCSSPrefix在Extjs中的buildSettings中定义：

1. Ext.buildSettings = Ext.apply({  
2.        baseCSSPrefix: 'x-',  
3.        scopeResetCSS: false 
4.    }, Ext.buildSettings || {}); 

现在联合起来看，我们知道我们面板的baseCls就是x-panel,所以写在最终页面上我们面板控件的基本样式就是x-panel-body

Body样式（面板上内容所用的样式）：如第3行，它意思是如果定义了bodyCls,那么就显示bodyCls,对于面板,bodyCls的定义如下：

1. initRenderData: function() {  
2.         return Ext.applyIf(this.callParent(), {  
3.             bodyStyle: this.initBodyStyles(),  
4.             bodyCls: this.initBodyCls()  
5.         });  
6.     }, 

从这里看出来，样式定义在initBodyCls()方法中：

1. initBodyCls: function() {  
2.         var me = this,  
3.             cls = '',  
4.             bodyCls = me.bodyCls;  
5.  
6.         if (bodyCls) {  
7.             Ext.each(bodyCls, function(v) {  
8.                 cls += " " + v;  
9.             });  
10.             delete me.bodyCls;  
11.         }  
12.         return cls.length > 0 ? cls : undefined;  
13.     }, 

所以，它是吧所有的bodyCls的内容用单字符分隔开来。

ui样式：这点类似于bodyCls,但我们例子中uiCls 没有，因为他从父类中继承来的uiCls为[]

style定义的样式：见第10-11行，他们是定义在bodyStyle中的，我们找到这段代码定义：

1. initBodyStyles: function() {  
2.         var me = this,  
3.             bodyStyle = me.bodyStyle,  
4.             styles = [],  
5.             Element = Ext.Element,  
6.             prop;  
7.  
8.         if (Ext.isFunction(bodyStyle)) {  
9.             bodyStyle = bodyStyle();  
10.         }  
11.         if (Ext.isString(bodyStyle)) {  
12.             styles = bodyStyle.split(';');  
13.         } else {  
14.             for (prop in bodyStyle) {  
15.                 if (bodyStyle.hasOwnProperty(prop)) {  
16.                     styles.push(prop + ':' + bodyStyle[prop]);  
17.                 }  
18.             }  
19.         }  
20.  
21.         if (me.bodyPadding !== undefined) {  
22.             styles.push('padding: ' + Element.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));  
23.         }  
24.         if (me.frame && me.bodyBorder) {  
25.             if (!Ext.isNumber(me.bodyBorder)) {  
26.                 me.bodyBorder = 1;  
27.             }  
28.             styles.push('border-width: ' + Element.unitizeBox(me.bodyBorder));  
29.         }  
30.         delete me.bodyStyle;  
31.         return styles.length ? styles.join(';') : undefined;  
32.     }, 

从这里看出，它是分离出当前的bodyStyle，如果是函数的形式，那么吧调用结果（第9行）放进去，否则就用分号进行分隔(12行），然后把样式中所有的key,value用冒号进行分隔，所以最终执行的样式字符串类似于真正的css样式表的书写格式】、