關於extjs控制項的id和樣式的研究

extjs中包含了大量的控制項，我們用的時候會發現這些控制項的id和樣式太難把握了，粗略看上去好像沒有什麼規律性，這也讓我們為使用控制項的應用程式寫自動化測試帶來了難題。其實，這些控制項的id和樣式是有規律的。

 

比方說：我們最簡單的面板控制項，他的樣式和id可能如下所示：

 

650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/114FH626-0.png" border="0" />

 

其實這個控制項id和樣式是非常有規律的，如果仔細研讀過原始碼，可以發現每個都用範本語言寫了一個模板，然後控制項的id,樣式建置規則都是在模板中定義的。

比如panel控制項的模板定義如下：

 

 

  
'<div id="{id}-body"   
  
      class="{baseCls}-body  
  
      <tpl if="bodyCls"> {bodyCls}</tpl>',  
  
      ' {baseCls}-body-{ui}  
  
      <tpl if="uiCls">',  
  
            '<tpl for="uiCls">   
  
                {parent.baseCls}-body-{parent.ui}-{.}     
  
 </tpl>',  
  
      '</tpl>"  
  
       <tpl if="bodyStyle"> 
  
           style="{bodyStyle}" 
  
       </tpl>>',  
  
'</div>' 
 

 

從這裡我們看出，任何一個控制項的id總是我們賦值給他的id然後加上“-body"尾碼，這個id是怎麼來的呢？它是你在建立這個組件時候給他分配的值：比如：clusterstab,否則的話，它就會用Ext.id來自動產生一個。比如，我們的例子中，id是自己分配的：

 

  
this.control({  
  
'mainPanel':{  
  
    afterrender:function(){  
  
      scope.thisTab='clusterstab';  
  
      Ext.getCmp('clusterstab').add(ext.create('widget.contentPanel',{  
  
    id: scope.thisTab+'Panel',  
  
    showType:scope.thisTab  
  
})); 
 

見第4行和6行可以解釋為什麼我們的例子中控制項id叫做clustertabPanel-body.

 

下面來談談樣式的產生：

因為控制項的複雜性，所以一個控制項的樣式也許有多個組成部分，我們逐一來看。

基本樣式：如第2行，是${baseCls}-body,這個${baseCls}是取決於控制項的類型，每個控制項都有自己的定義，比如panel的樣式的baseCls如下：

 

  
baseCls : Ext.baseCSSPrefix + 'panel', 
 

而這個Ext.baseCSSPrefix在Extjs中的buildSettings中定義：

 

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

現在聯合起來看，我們知道我們面板的baseCls就是x-panel,所以寫在最終頁面上我們面板控制項的基本樣式就是x-panel-body

Body樣式面板上內容所用的樣式）：如第3行，它意思是如果定義了bodyCls,那麼就顯示bodyCls,對於面板,bodyCls的定義如下：

 

  
initRenderData: function() {  
  
        return Ext.applyIf(this.callParent(), {  
  
            bodyStyle: this.initBodyStyles(),  
  
            bodyCls: this.initBodyCls()  
  
        });  
  
    }, 
 

從這裡看出來，樣式定義在initBodyCls()方法中：

 

  
initBodyCls: function() {  
  
        var me = this,  
  
            cls = '',  
  
            bodyCls = me.bodyCls;  
  
 
  
        if (bodyCls) {  
  
            Ext.each(bodyCls, function(v) {  
  
                cls += " " + v;  
  
            });  
  
            delete me.bodyCls;  
  
        }  
  
        return cls.length > 0 ? cls : undefined;  
  
    }, 
 

所以，它是吧所有的bodyCls的內容用單字元分隔開來。

 

ui樣式：這點類似於bodyCls,但我們例子中uiCls 沒有，因為他從父類中繼承來的uiCls為[]

style定義的樣式：見第10-11行，他們是定義在bodyStyle中的，我們找到這段代碼定義：

 

  
initBodyStyles: function() {  
  
        var me = this,  
  
            bodyStyle = me.bodyStyle,  
  
            styles = [],  
  
            Element = Ext.Element,  
  
            prop;  
  
 
  
        if (Ext.isFunction(bodyStyle)) {  
  
            bodyStyle = bodyStyle();  
  
        }  
  
        if (Ext.isString(bodyStyle)) {  
  
            styles = bodyStyle.split(';');  
  
        } else {  
  
            for (prop in bodyStyle) {  
  
                if (bodyStyle.hasOwnProperty(prop)) {  
  
                    styles.push(prop + ':' + bodyStyle[prop]);  
  
                }  
  
            }  
  
        }  
  
 
  
        if (me.bodyPadding !== undefined) {  
  
            styles.push('padding: ' + Element.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));  
  
        }  
  
        if (me.frame && me.bodyBorder) {  
  
            if (!Ext.isNumber(me.bodyBorder)) {  
  
                me.bodyBorder = 1;  
  
            }  
  
            styles.push('border-width: ' + Element.unitizeBox(me.bodyBorder));  
  
        }  
  
        delete me.bodyStyle;  
  
        return styles.length ? styles.join(';') : undefined;  
  
    }, 
 

從這裡看出，它是分離出當前的bodyStyle，如果是函數的形式，那麼吧調用結果第9行）放進去，否則就用分號進行分隔(12行），然後把樣式中所有的key,value用冒號進行分隔，所以最終執行的樣式字串類似於真正的css樣式表的書寫格式】、

本文出自 “平行線的凝聚” 部落格，請務必保留此出處http://supercharles888.blog.51cto.com/609344/1186603