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，如需转载请自行联系原作者