ExtJS4.2學習(二)Ext統一元件模型

學而不思則罔，思而不學則殆。雖然Ext元件擁有幾乎完美的對象繼承模型，但是這畢竟屬于底層架構的一部分，我們日常開發時候接觸最多的還是各種元件與布局，通過元件、布局的各種組合最終才形成了功能強勁的應用，是以有必要首先對Ext的元件模型有所了解。

Ext中所有的可視元件都繼承自Ext.component，這種單根繼承的模型保證所有元件都擁有相同的通用方法與生命周期，這樣在後續對這些元件進行維護管理時将更加便捷，同時也保證了在進行布局時的便利。

元件最常見的幾項功能包含initComponent()、render()、show()和hide()，無論是哪一種元件都是通過初始化、渲染、顯示、隐藏來實作其整個生命周期的。

作為基類Ext.Component本身不包含任何格式，我們需要在使用時為它指定渲染的HTML内容，通過HTML參數傳入。

下面給個例子：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<code>&lt;code id=</code><code>"code0"</code><code>&gt;&lt;%@ page language=</code><code>"java"</code> <code>contentType=</code><code>"text/html; charset=UTF-8"</code> <code>pageEncoding=</code><code>"UTF-8"</code><code>%&gt;</code>

<code>&lt;!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD HTML 4.01 Transitional//EN"</code> <code>"http://www.w3.org/TR/html4/loose.dtd"</code><code>&gt;</code>

<code>&lt;html&gt;</code>

<code>&lt;head&gt;</code>

<code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=UTF-8"</code><code>&gt;</code>

<code>&lt;title&gt;Hello Extjs4.2&lt;/title&gt;</code>

<code>&lt;link href=</code><code>"../ExtJS4.2/resources/css/ext-all-neptune.css"</code> <code>rel=</code><code>"stylesheet"</code><code>&gt;</code>

<code>&lt;!-- &lt;script src=</code><code>"../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>&gt;&lt;/script&gt; --&gt;</code>

<code>&lt;script src=</code><code>"../ExtJS4.2/ext-all.js"</code><code>&gt;&lt;/script&gt;</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>/* Start ExtJS 中自定義類 **/</code>

<code>//整體生命周期為：初始化、渲染、顯示、隐藏</code>

<code>/*Ext.onReady(function(){</code>

<code>    </code><code>var box = new Ext.Panel({</code>

<code>        </code><code>el: 'test',</code>

<code>        </code><code>title:'測試标題',</code>

<code>        </code><code>floating:true,</code>

<code>        </code><code>draggable:true,</code>

<code>        </code><code>html:'測試内容',</code>

<code>        </code><code>pageX:100,</code>

<code>        </code><code>pageY:50,</code>

<code>        </code><code>width:200,</code>

<code>        </code><code>height:150</code>

<code>    </code><code>});</code>

<code>    </code><code>box.render();</code>

<code>});*/</code>

<code>Ext.onReady(</code><code>function</code><code>(){</code>

<code>    </code><code>var</code> <code>box = </code><code>new</code> <code>Ext.Component({</code>

<code>        </code><code>el: </code><code>'test'</code><code>,</code>

<code>        </code><code>style:</code><code>'background-color:red;position:absoulte'</code><code>,</code>

<code>});</code>

<code>/* END ExtJS 中自定義類 **/</code>

<code>                           </code> 

<code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>&lt;h1&gt;我的ExtJS4.2學習之路&lt;/h1&gt;</code>

<code>&lt;hr /&gt;</code>

<code>作者：束洋洋</code>

<code>開始日期：2013-11-05 22:35:38</code>

<code>&lt;h2&gt;深入淺出Extjs之統一的元件模型&lt;/h2&gt;</code>

<code>&lt;div id=</code><code>"test"</code><code>&gt;&lt;/div&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;  &lt;/code&gt;</code>

上為例子顯示效果。注釋部分為第二個效果，Ext.Panle是Ext中經常用到的一個元件，它直接繼承自Ext.Container。與上面些元件不同的是，Ext.panel無須繼承就可以直接使用。下圖為效果：

Ext4.2運用了扁平化的設計，我很喜歡。希望學習愉快！

本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1329021，如需轉載請自行聯系原作者