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

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

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

其實這個控制項id和樣式是非常有規律的，如果仔細研讀過源**，可以發現每個都用模板語言寫了乙個模板，然後控制項的id,樣式生成規則都是在模板中定義的。

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

divid

="-body"

class

="-body

tplif

="bodycls"

tpl>

' -body-

tplif

="uicls"

tplfor

="uicls"

-body--

tpl>

'tpl

" <

tplif

="bodystyle"

style=""

tpl>

'div

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

this

.control());

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

下面來談談樣式的生成：

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

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

basecls : ext.basecssprefix +

'panel'

, 而這個ext.basecssprefix在extjs中的buildsettings中定義：

basecssprefix:

'x-'

, scoperesetcss:

false

}, ext.buildsettings || {});

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

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

initrenderdata:

function

() );

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

initbodycls:

function

() );

delete

me.bodycls;

} return

cls.length > 0 ? cls : undefined;

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

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

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

initbodystyles:

function

()

if(ext.isstring(bodystyle))

else

} } if

(me.bodypadding !== undefined)

if(me.frame && me.bodyborder)

styles.push(

'border-width: '

+ element.unitizebox(me.bodyborder));

} delete

me.bodystyle;

return

styles.length ? styles.join(

';') : undefined;

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

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

ExtJS控制項樣式的修改

關於控制項ID的學習心得

ExtJS 的樣式控制

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

ExtJS控制項樣式的修改

關於控制項ID的學習心得

ExtJS 的樣式控制

相關推薦