转自:http://www.cnblogs.com/yql1986/archive/2011/03/11/1981446.html
Ext.DataView 一种使用定制的模板布局和格式展示数据的机制。 DataView使用一个Ext.XTemplate作为其内部的模板机制, 并被绑定到一个Ext.data.Store, 这样当store中的数据发生变化时视图将自动同步以反应变化。 视图也内建了对许多可能发生的通用事件的处理,包含项目被单击、双击、鼠标滑过、鼠标移出等等, 同时也有一个内建的选择模型(selection model)。 为了使用这些特性,必须为DataView提供一个itemSelector配置项, 用来决定与哪个节点配合使用。
以下是使用Ext.DataView和Ext.Panel输出数据
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<script type=
"text/javascript"
>
Ext.onReady(
function
() {
// create the data store
var
store =
new
Ext.data.ArrayStore({
fields: [
{ name:
'company'
},
{ name:
'price'
, type:
'float'
},
{ name:
'change'
, type:
'float'
},
{ name:
'pctChange'
, type:
'float'
},
{ name:
'lastChange'
, type:
'date'
, dateFormat:
'n/j h:ia'
}
]
});
// sample static data for the store
var
myData = [
[
'3m Co'
, 71.72, 0.02, 0.03,
'9/1 12:00am'
],
[
'Alcoa Inc'
, 29.01, 0.42, 1.47,
'9/1 12:00am'
],
[
'Altria Group Inc'
, 83.81, 0.28, 0.34,
'9/1 12:00am'
],
[
'American Express Company'
, 52.55, 0.01, 0.02,
'9/1 12:00am'
],
[
'American International Group, Inc.'
, 64.13, 0.31, 0.49,
'9/1 12:00am'
],
[
'AT&T Inc.'
, 31.61, -0.48, -1.54,
'9/1 12:00am'
],
[
'Boeing Co.'
, 75.43, 0.53, 0.71,
'9/1 12:00am'
],
[
'Caterpillar Inc.'
, 67.27, 0.92, 1.39,
'9/1 12:00am'
],
[
'Citigroup, Inc.'
, 49.37, 0.02, 0.04,
'9/1 12:00am'
],
[
'E.I. du Pont de Nemours and Company'
, 40.48, 0.51, 1.28,
'9/1 12:00am'
],
[
'Exxon Mobil Corp'
, 68.1, -0.43, -0.64,
'9/1 12:00am'
],
[
'General Electric Company'
, 34.14, -0.08, -0.23,
'9/1 12:00am'
],
[
'General Motors Corporation'
, 30.27, 1.09, 3.74,
'9/1 12:00am'
],
[
'Hewlett-Packard Co.'
, 36.53, -0.03, -0.08,
'9/1 12:00am'
],
[
'Honeywell Intl Inc'
, 38.77, 0.05, 0.13,
'9/1 12:00am'
],
[
'Intel Corporation'
, 19.88, 0.31, 1.58,
'9/1 12:00am'
],
[
'International Business Machines'
, 81.41, 0.44, 0.54,
'9/1 12:00am'
],
[
'Johnson & Johnson'
, 64.72, 0.06, 0.09,
'9/1 12:00am'
],
[
'JP Morgan & Chase & Co'
, 45.73, 0.07, 0.15,
'9/1 12:00am'
],
[
'McDonald\'s Corporation'
, 36.76, 0.86, 2.40,
'9/1 12:00am'
],
[
'Merck & Co., Inc.'
, 40.96, 0.41, 1.01,
'9/1 12:00am'
],
[
'Microsoft Corporation'
, 25.84, 0.14, 0.54,
'9/1 12:00am'
],
[
'Pfizer Inc'
, 27.96, 0.4, 1.45,
'9/1 12:00am'
],
[
'The Coca-Cola Company'
, 45.07, 0.26, 0.58,
'9/1 12:00am'
],
[
'The Home Depot, Inc.'
, 34.64, 0.35, 1.02,
'9/1 12:00am'
],
[
'The Procter & Gamble Company'
, 61.91, 0.01, 0.02,
'9/1 12:00am'
],
[
'United Technologies Corporation'
, 63.26, 0.55, 0.88,
'9/1 12:00am'
],
[
'Verizon Communications'
, 35.57, 0.39, 1.11,
'9/1 12:00am'
],
[
'Wal-Mart Stores, Inc.'
, 45.45, 0.73, 1.63,
'9/1 12:00am'
]
];
// manually load local data
store.loadData(myData);
var
tpl =
new
Ext.XTemplate(
'<tpl for=".">'
,
'<div class="thumb-wrap">'
,
'<table><tr>'
,
'<td>{company}</td><td>{price}</td><td>{change}</td><td>{pctChange}</td><td>{lastChange}</td>'
,
'</tr></table>'
,
'</div>'
,
'</tpl>'
,
'<div class="x-clear"></div>'
);
var
panel =
new
Ext.Panel({
id:
'images-view'
,
frame:
true
,
width: 535,
autoHeight:
true
,
collapsible:
true
,
layout:
'fit'
,
autoHeight:
true
,
title:
'Simple DataView'
,
items:
new
Ext.DataView({
store: store,
tpl: tpl,
autoHeight:
true
,
multiSelect:
true
,
overClass:
'x-view-over'
,
itemSelector:
'div.thumb-wrap'
,
emptyText:
'No images to display'
})
});
panel.render(document.body);
});
</script>
|
以下是上面的代码执行之后在IE8中的截图
![](https://i-blog.csdnimg.cn/blog_migrate/e82a0539bbd8040ee30623ba6a27ec47.png)
图(1)
下面来简单分析下, EXTJS是怎么样呈现这样的界面,其大致执行流程,用以加深对EXTJS的理解,也便于自己日后写扩展。下面的截图是用StarUML画出上面的代码所涉及到有关"类"和组件之间的关系图
![](https://i-blog.csdnimg.cn/blog_migrate/58fe8a17dc092eb2768726da7e2c8fc9.png)
图(2)
1
2
3
4
5
6
7
8
9
10
11
12
|
var
panel =
new
Ext.Panel({
//...
items:
new
Ext.DataView({
store: store,
tpl: tpl,
autoHeight:
true
,
multiSelect:
true
,
overClass:
'x-view-over'
,
itemSelector:
'div.thumb-wrap'
,
emptyText:
'No images to display'
})
});
|
当实例化Panel时候会先实例化传入的object literal中的items。根据图(2)中Ext.DataView中继承关系和之前一篇文章Extjs- Ext.extend函数的使用知道 Ext.DataView 中传入的object literal中将会传入至Ext.Component的constructor中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Ext.Component =
function
(config){
//...
this
.getId();
//...
}
Ext.Component.AUTO_ID = 1000;
Ext.extend(Ext.Component, Ext.util.Observable, {
//...
getId :
function
(){
return
this
.id || (
this
.id =
'ext-comp-'
+ (++Ext.Component.AUTO_ID));
}
//...
});
|
执行Ext.Component的constructor方法时会调用this.getId()方法,在上面的代码中没有传入id值。因此得知实例化items的组件的id编号为ext-comp-1001。用firebug查看EXJS生成的HTML可以很清楚的看到
![](https://i-blog.csdnimg.cn/blog_migrate/f535ccaa325cf5a949c17c8adccff167.png)
图(3)
Ext.Component的constructor方法会调用this.initComponent()方法。当实例化items时候根据图(2),则会先调用Ext.DataView中的initComponent方法,随后会根据继承关系会向上回溯直至Ext.Component的initComponet,当执行Ext.Component中的initComponent方法之后又会向下回溯至Ext.BoxComponet中的initComponent方法,当执行完Ext.BoxComponent中的initComponent方法又会返回Ext.DataView中继续执行initComponent。中间的细节在此跳过,可以自己查看源码。
实例化items完后,接下来就会实例化Panel类,同之前过程一模一样,也是会调用Ext.Component的constructor方法。根据图(2)中Ext.Panel的继承关系会依次调用相应的类的initComponent方法。实例化完Panel类时,因为传入了id值为'images-view'这样的话panel的id值将不会自动产生,而是'images-view'。在firebug中查看
![](https://i-blog.csdnimg.cn/blog_migrate/14eed4c64afaca15df9db9e39201a3b7.png)
图(4)
两个组件都已经实例化完成了,接下来会执行panel.render(document.body)。根据图(2)得知会调用Ext.Component的render方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
Ext.extend(Ext.Component, Ext.util.Observable, {
//...
render :
function
(container, position){
if
(!
this
.rendered &&
this
.fireEvent(
'beforerender'
,
this
) !==
false
){
//...
this
.onRender(
this
.container, position ||
null
);
//...
this
.afterRender(
this
.container);
//...
}
return
this
;
}
//...
});
|
当执行到this.onRender(this.container, position || null)时,根据图(2) 则会调用Ext.Panel中的onRender方法。Ext.Panel.supreclass.onRnder.call(this,ct,position) 则会调用Ext.Component中的onRender方法。调用完之后会返回继续执行Ext.Panel中的onRender方法
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
|
Ext.Panel = Ext.extend(Ext.Container, {
//...
onRender :
function
(ct, position){
Ext.Panel.superclass.onRender.call(
this
, ct, position);
//...
}
//...
});
Ext.extend(Ext.Component, Ext.util.Observable, {
//...
onRender :
function
(ct, position){
//..
}
//....
));
|
当程序执行到this.afterRender(this.container)时候,查看此时生成EXTJS产生的HTML代码
this.container.dom.innerHTML
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
|
<
div
id
=
images
-view
class
=
" x-panel"
>
<
div
class
=
x
-panel-tl>
<
div
class
=
x
-panel-tr>
<
div
class
=
x
-panel-tc>
<
div
style
=
"MozUserSelect: none; KhtmlUserSelect: none"
id
=
ext
-gen4
class
=
"x-panel-header x-unselectable"
unselectable
=
"on"
>
<
div
id
=
ext
-gen9
class
=
"x-tool x-tool-toggle"
> </
div
>
<
span
class
=
x
-panel-header-text></
span
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
ext
-gen5
class
=
x
-panel-bwrap>
<
div
class
=
x
-panel-ml>
<
div
class
=
x
-panel-mr>
<
div
id
=
ext
-gen8
class
=
x
-panel-mc>
<
div
id
=
ext
-gen6
class
=
x
-panel-body></
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
ext
-gen7
class
=
"x-panel-bl x-panel-nofooter"
>
<
div
class
=
x
-panel-br>
<
div
class
=
x
-panel-bc></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
|
this.container.dom.outerHTML
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
|
<
body
id
=
ext
-gen3
class
=
" ext-ie ext-ie8"
>
<
div
id
=
images
-view
class
=
" x-panel"
>
<
div
class
=
x
-panel-tl>
<
div
class
=
x
-panel-tr>
<
div
class
=
x
-panel-tc>
<
div
style
=
"MozUserSelect: none; KhtmlUserSelect: none"
id
=
ext
-gen4
class
=
"x-panel-header x-unselectable"
unselectable
=
"on"
>
<
div
id
=
ext
-gen9
class
=
"x-tool x-tool-toggle"
> </
div
>
<
span
class
=
x
-panel-header-text></
span
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
ext
-gen5
class
=
x
-panel-bwrap>
<
div
class
=
x
-panel-ml>
<
div
class
=
x
-panel-mr>
<
div
id
=
ext
-gen8
class
=
x
-panel-mc>
<
div
id
=
ext
-gen6
class
=
x
-panel-body></
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
ext
-gen7
class
=
"x-panel-bl x-panel-nofooter"
>
<
div
class
=
x
-panel-br>
<
div
class
=
x
-panel-bc></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
|
<
div
id
=
ext
-gen6
class
=
x
-panel-body></
div
> 可以看出x-panel-body中什么也没有,因此可以推测出当执行完this.afterRender(this.container)之后。将会将myData中的数据填充到其内部
|
接下来分析Ext.Component中的render方法中的this.afterRender(this.container)方法。根据图(2)中的继承关系图可以知道 this.afterRender(this.container)会调用Panel中的afterRender方法。调用Panel中的afterRender方法,沿着继承链向上回溯,Ext.Componet和Ext.BoxComponent中的afterRender方法不是分析的重点,可自行查看源码。当执行到Ext.Container中的afterRender方法时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Ext.Container = Ext.extend(Ext.BoxComponent, {
//...
afterRender:
function
(){
//...
if
(!
this
.ownerCt){
this
.doLayout(
false
,
true
);
}
//...
},
doLayout :
function
(shallow, force){
//...
if
(rendered &&
this
.layout){
this
.layout.layout();
}
//...
}
//...
});
|
当执行到this.layout.layout()的时候,因为传入panel中的object literal 中layout:'fit'则布局为Ext.layout.FitLayout,而Ext.layout.FitLayout继承自Ext.layout.ContainerLayout 如图(2)所示。因此this.layout.Layout将会调用Ext.layout.ContainerLayout中的layout方法
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
|
Ext.layout.ContainerLayout = Ext.extend(Object, {
//...
layout :
function
(){
//...
this
.onLayout(ct, target);
//...
},
onLayout :
function
(ct, target){
this
.renderAll(ct, target);
},
renderAll :
function
(ct, target){
var
items = ct.items.items, i, c, len = items.length;
for
(i = 0; i < len; i++) {
c = items[i];
if
(c && (!c.rendered || !
this
.isValidParent(c, target))){
this
.renderItem(c, i, target);
}
}
},
renderItem :
function
(c, position, target){
if
(c){
if
(!c.rendered) {
c.render(target, position);
this
.configureItem(c);
}
else
if
(!
this
.isValidParent(c, target)){
//...
}
}
}
//...
});
|
调用Ext.layout.ContainerLayout中的layout方法 最终我们将目光锁定在 c.render(target,positon)上,而c参数是由renderAll传入进来的,分析renderAll得知c的执行环境为最先实例化的items 故将调用Ext.DataView中的render方法,通过图(2)得知实质将调用Ext.Component的render方法,当执行Ext.Componet方法的时候,前面已经分析了。当调用this.afterRender,此时this指向Ext.DataView,将调用Ext.DataView的afterRender方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Ext.DataView = Ext.extend(Ext.BoxComponent, {
//...
afterRender :
function
(){
//...
if
(
this
.store){
this
.bindStore(
this
.store,
true
);
},
bindStore :
function
(store, initial){
//...
if
(store){
this
.refresh();
}
}
},
refresh :
function
() {
//...
this
.tpl.overwrite(el,
this
.collectData(records, 0));
//...
}
//...
});
|
this.refresh()是关键之所在,EXTJS将在这个函数将myData填充到模板之中。到处为上已经全部分析完了,要理解这整个过程的前提是你必须对EXTJS有一定的了解,而不只是会简单使用,就像拖拉控件一样。如果这样的话,你会看的云里雾里,建议你还是不要看为好。