Dijit、ExtJS、jQuery UI 异同浅析（2）
|
- UID
- 1066743
|
Dijit、ExtJS、jQuery UI 异同浅析（2）
控件创建Dijit 篇：Dijit 控件的创建方式有两种，编程式（programmatic）以及声明式（declarative）。
使用编程方式使用 Dijit 控件与使用传统面向对象语言进行 UI 编程非常类似。通常只需要提供一个 DOM 节点、一个散列参数表并使用 new 关键字创建一个所需的 dijit 控件对象即可。
清单 4. Dijit 使用 new 关键字创建 Button 控件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<script type="text/javascript">
dojo.addOnLoad(function(){
var button = new dijit.form.Button({
id: "programmatic",
label: "This is a button"
}, "buttonNode");
});
</script>
</head>
<body>
<div>
<button id="buttonNode">
</button>
</div>
</body>
</html>
|
上述代码将会创建一个 Button 控件，并将 id 为 buttonNode 的 button 标签元素替换为实例化的控件的 DOM 树。而 button 变量则指向该控件实例的引用。此外还可以先创建控件实例，再将其插入到页面的 DOM 树中。
清单 5. Dijit 使用 new 关键字创建 Button 控件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<script type="text/javascript">
dojo.addOnLoad(function(){
var button = new dijit.form.Button({
id: "programmatic",
label: "This is a button"
});
button.placeAt("buttonContainer");
});
</script>
</head>
<body>
<div>
<p id="buttonContainer">
</p>
</div>
</body>
</html>
|
上述代码会创建一个 Button 控件实例并将其 DOM 树其插入到 id 为 buttonContainer 的 p 标签元素之下。
使用声明方式使用 Dijit 控件时，需要为 HTML 标签添加 data-dojo-type 以及 data-dojo-props 属性，其中 data-dojo-type 表示所要生成控件的名称，data-dojo-props 包含生成控件所需的构造参数。使用此种方法创建 Dijit 控件时，可以在导入 Dojo 核心文件时通过 parseOnLoad 属性配置是否自动实例化页面上所有控件。
清单 6. 开启 parseOnLoad 属性，自动创建控件1
2
3
4
5
6
7
8
9
10
| <html>
<head>
<script type="text/javascript" src="lib/dojo/dojo.js" data-dojo-config="parseOnLoad:
true"/>
</head>
<body>
<button data-dojo-type="dijit.form.Button"
data-dojo-props= 'id: "declarative"; label: "This is a button"’ />
</body>
</html>
|
上述代码将会在页面加载完毕后自动实例化一个 Button 控件。当用户选择关闭 parseOnLoad 选项时，可以通过手动方式实例化所需要的控件。
清单 7. 关闭 parseOnLoad 属性，手动创建控件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<script type="text/javascript" src="lib/dojo/dojo.js" data-dojo-config="parseOnLoad:
false"/>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
</head>
<body>
<button data-dojo-type="dijit.form.Button"
data-dojo-props= 'id: "declarative"; label: "This is a button"’ />
</body>
</html>
|
无论是否启用 parseOnLoad 选项，其本质都是使用 dojo.parser 这个对象对页面进行扫描，解析 HTML 标签中的属性，并根据这些属性内容实例化控件。需要注意的是，dojo.parser 并不是 Dojo base 的一部分，也就是说之前导入的 Dojo 核心文件 dojo.js 并不包含 dojo.parser 模块，因此通常情况下使用 dojo.parser 的话需要额外添加代码导入 dojo.parser 模块。
清单 8. 导入 dojo.parser 模块1
| dojo.require("dojo.parser");
|
然而在使用 Button 控件时，由于我们已经导入了 dijit.form.Button 模块 ,Dojo 会为我们自动加载所有该模块依赖的资源，其中就包括 dojo.parser 模块对应的 JS 文件。
ExtJS 篇：ExtJS 控件的生成方式基于使用 new 关键字创建一个 ExtJS 控件对象，将其放入需要渲染的 DOM 节点中。例如：
清单 9. ExtJS 使用 new 关键字创建 Button 控件1
2
3
4
5
6
7
| <script type="text/javascript">
var button = new Ext.Button({
id: 'button',
text: 'button',
renderTo: Ext.getBody()
});
</script>
|
上述代码中，通过赋予 renderTo 参数一个页面的 DOM 节点，将一个 Ext.Button 对象添加到 body 元素中，至此一个简单的 ExtJS 控件完成了。
此外 ,ExtJS 还允许用户通过 add() 和 doLayout() 方法，向容器控件（继承自 Ext.Container 类的控件）中添加缺省 renderTo 属性的子控件。
清单 10. ExtJS 向容器控件添加子控件1
2
3
4
5
6
7
8
9
10
| <script type="text/javascript">
var mainPanel = new Ext.Panel({
renderTo: Ext.getBody()
});
var button = new Ext.Button({
id:'button'
});
mainPanel.add(button);
mainPanel.doLayout();
</script>
|
上述代码首先将 mainPanel 对象渲染到 body 元素中，之后通过 add() 和 doLayout() 方法将缺省 renderTo 属性的 button 对象添加到 mainPanel 对象中，并重新渲染 mainPanel 对象，此时 button 对象也会被渲染到页面上。
ExtJS 没有像 Dijit 那样提供通过解析 HTML 标签的方式创建控件，但是提供了简单的反射机制，使用户可通过描述符来生成控件。
清单 11. ExtJS 通过描述符生成控件1
2
3
4
5
6
7
8
9
| <script type="text/javascript">
var mainPanel = new Ext.Panel({
items: [{
xtype: 'button',
id: 'button'
}],
renderTo: Ext.getBody()
});
</script>
|
上述代码首先实例化一个 ExtJS 的 Panel 控件并在其 items 属性中添加了一段关于 button 控件的描述符，在 mainPanel 对象渲染的过程中，会遍历 items 数组中的每一个对象，如果对象没有被实例化，则会寻找描述符对象中的 xtype 属性。而后，在控件创建的过程中，Ext.ComponentMgr 的 create() 方法会根据描述的 xtype 属性寻找在 Ext.reg 中注册过的控件类，通过反射的方式创建一个对应的控件实例。 |
|
|
|
|
|
