分析Ext.DataView结合Ext.Panel是怎么样输出数据
来源:互联网 发布:淘宝店铺装修模板350 编辑:程序博客网 时间:2024/06/15 03:59
Ext.DataView 一种使用定制的模板布局和格式展示数据的机制。 DataView使用一个Ext.XTemplate作为其内部的模板机制, 并被绑定到一个Ext.data.Store, 这样当store中的数据发生变化时视图将自动同步以反应变化。 视图也内建了对许多可能发生的通用事件的处理,包含项目被单击、双击、鼠标滑过、鼠标移出等等, 同时也有一个内建的选择模型(selection model)。为了使用这些特性,必须为DataView提供一个itemSelector配置项, 用来决定与哪个节点配合使用。
以下是使用Ext.DataView和Ext.Panel输出数据
01
<script type=
"text/javascript"
>
02
03
Ext.onReady(
function
() {
04
05
// create the data store
06
var
store =
new
Ext.data.ArrayStore({
07
fields: [
08
{ name:
'company'
},
09
{ name:
'price'
, type:
'float'
},
10
{ name:
'change'
, type:
'float'
},
11
{ name:
'pctChange'
, type:
'float'
},
12
{ name:
'lastChange'
, type:
'date'
, dateFormat:
'n/j h:ia'
}
13
]
14
});
15
16
17
// sample static data for the store
18
var
myData = [
19
[
'3m Co'
, 71.72, 0.02, 0.03,
'9/1 12:00am'
],
20
[
'Alcoa Inc'
, 29.01, 0.42, 1.47,
'9/1 12:00am'
],
21
[
'Altria Group Inc'
, 83.81, 0.28, 0.34,
'9/1 12:00am'
],
22
[
'American Express Company'
, 52.55, 0.01, 0.02,
'9/1 12:00am'
],
23
[
'American International Group, Inc.'
, 64.13, 0.31, 0.49,
'9/1 12:00am'
],
24
[
'AT&T Inc.'
, 31.61, -0.48, -1.54,
'9/1 12:00am'
],
25
[
'Boeing Co.'
, 75.43, 0.53, 0.71,
'9/1 12:00am'
],
26
[
'Caterpillar Inc.'
, 67.27, 0.92, 1.39,
'9/1 12:00am'
],
27
[
'Citigroup, Inc.'
, 49.37, 0.02, 0.04,
'9/1 12:00am'
],
28
[
'E.I. du Pont de Nemours and Company'
, 40.48, 0.51, 1.28,
'9/1 12:00am'
],
29
[
'Exxon Mobil Corp'
, 68.1, -0.43, -0.64,
'9/1 12:00am'
],
30
[
'General Electric Company'
, 34.14, -0.08, -0.23,
'9/1 12:00am'
],
31
[
'General Motors Corporation'
, 30.27, 1.09, 3.74,
'9/1 12:00am'
],
32
[
'Hewlett-Packard Co.'
, 36.53, -0.03, -0.08,
'9/1 12:00am'
],
33
[
'Honeywell Intl Inc'
, 38.77, 0.05, 0.13,
'9/1 12:00am'
],
34
[
'Intel Corporation'
, 19.88, 0.31, 1.58,
'9/1 12:00am'
],
35
[
'International Business Machines'
, 81.41, 0.44, 0.54,
'9/1 12:00am'
],
36
[
'Johnson & Johnson'
, 64.72, 0.06, 0.09,
'9/1 12:00am'
],
37
[
'JP Morgan & Chase & Co'
, 45.73, 0.07, 0.15,
'9/1 12:00am'
],
38
[
'McDonald\'s Corporation'
, 36.76, 0.86, 2.40,
'9/1 12:00am'
],
39
[
'Merck & Co., Inc.'
, 40.96, 0.41, 1.01,
'9/1 12:00am'
],
40
[
'Microsoft Corporation'
, 25.84, 0.14, 0.54,
'9/1 12:00am'
],
41
[
'Pfizer Inc'
, 27.96, 0.4, 1.45,
'9/1 12:00am'
],
42
[
'The Coca-Cola Company'
, 45.07, 0.26, 0.58,
'9/1 12:00am'
],
43
[
'The Home Depot, Inc.'
, 34.64, 0.35, 1.02,
'9/1 12:00am'
],
44
[
'The Procter & Gamble Company'
, 61.91, 0.01, 0.02,
'9/1 12:00am'
],
45
[
'United Technologies Corporation'
, 63.26, 0.55, 0.88,
'9/1 12:00am'
],
46
[
'Verizon Communications'
, 35.57, 0.39, 1.11,
'9/1 12:00am'
],
47
[
'Wal-Mart Stores, Inc.'
, 45.45, 0.73, 1.63,
'9/1 12:00am'
]
48
];
49
50
// manually load local data
51
store.loadData(myData);
52
53
var
tpl =
new
Ext.XTemplate(
'<tpl for=".">'
,
54
'<div class="thumb-wrap">'
,
55
'<table><tr>'
,
56
'<td>{company}</td><td>{price}</td><td>{change}</td><td>{pctChange}</td><td>{lastChange}</td>'
,
57
'</tr></table>'
,
58
'</div>'
,
59
'</tpl>'
,
60
'<div class="x-clear"></div>'
);
61
62
var
panel =
new
Ext.Panel({
63
id:
'images-view'
,
64
frame:
true
,
65
width: 535,
66
autoHeight:
true
,
67
collapsible:
true
,
68
layout:
'fit'
,
69
autoHeight:
true
,
70
title:
'Simple DataView'
,
71
72
items:
new
Ext.DataView({
73
store: store,
74
tpl: tpl,
75
autoHeight:
true
,
76
multiSelect:
true
,
77
overClass:
'x-view-over'
,
78
itemSelector:
'div.thumb-wrap'
,
79
emptyText:
'No images to display'
80
})
81
});
82
panel.render(document.body);
83
84
});
85
</script>
以下是上面的代码执行之后在IE8中的截图
图(1)
下面来简单分析下, EXTJS是怎么样呈现这样的界面,其大致执行流程,用以加深对EXTJS的理解,也便于自己日后写扩展。下面的截图是用StarUML画出上面的代码所涉及到有关"类"和组件之间的关系图
图(2)
01
var
panel =
new
Ext.Panel({
02
//...
03
items:
new
Ext.DataView({
04
store: store,
05
tpl: tpl,
06
autoHeight:
true
,
07
multiSelect:
true
,
08
overClass:
'x-view-over'
,
09
itemSelector:
'div.thumb-wrap'
,
10
emptyText:
'No images to display'
11
})
12
});
当实例化Panel时候会先实例化传入的object literal中的items。根据图(2)中Ext.DataView中继承关系和之前一篇文章Extjs- Ext.extend函数的使用知道 Ext.DataView 中传入的object literal中将会传入至Ext.Component的constructor中。
01
Ext.Component =
function
(config){
02
//...
03
this
.getId();
04
//...
05
}
06
07
Ext.Component.AUTO_ID = 1000;
08
09
Ext.extend(Ext.Component, Ext.util.Observable, {
10
//...
11
getId :
function
(){
12
return
this
.id || (
this
.id =
'ext-comp-'
+ (++Ext.Component.AUTO_ID));
13
}
14
//...
15
});
执行Ext.Component的constructor方法时会调用this.getId()方法,在上面的代码中没有传入id值。因此得知实例化items的组件的id编号为ext-comp-1001。用firebug查看EXJS生成的HTML可以很清楚的看到
图(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中查看
图(4)
两个组件都已经实例化完成了,接下来会执行panel.render(document.body)。根据图(2)得知会调用Ext.Component的render方法。
01
Ext.extend(Ext.Component, Ext.util.Observable, {
02
//...
03
render :
function
(container, position){
04
if
(!
this
.rendered &&
this
.fireEvent(
'beforerender'
,
this
) !==
false
){
05
//...
06
07
this
.onRender(
this
.container, position ||
null
);
08
09
//...
10
11
this
.afterRender(
this
.container);
12
13
//...
14
}
15
return
this
;
16
}
17
//...
18
});
当执行到this.onRender(this.container, position || null)时,根据图(2) 则会调用Ext.Panel中的onRender方法。Ext.Panel.supreclass.onRnder.call(this,ct,position) 则会调用Ext.Component中的onRender方法。调用完之后会返回继续执行Ext.Panel中的onRender方法
01
Ext.Panel = Ext.extend(Ext.Container, {
02
03
//...
04
05
onRender :
function
(ct, position){
06
07
Ext.Panel.superclass.onRender.call(
this
, ct, position);
08
09
//...
10
11
}
12
13
//...
14
15
});
16
17
Ext.extend(Ext.Component, Ext.util.Observable, {
18
19
//...
20
21
onRender :
function
(ct, position){
22
//..
23
}
24
//....
25
));
当程序执行到this.afterRender(this.container)时候,查看此时生成EXTJS产生的HTML代码
this.container.dom.innerHTML
01
<
div
id
=
images
-view
class
=
" x-panel"
>
02
<
div
class
=
x
-panel-tl>
03
<
div
class
=
x
-panel-tr>
04
<
div
class
=
x
-panel-tc>
05
<
div
style
=
"MozUserSelect: none; KhtmlUserSelect: none"
id
=
ext
-gen4
class
=
"x-panel-header x-unselectable"
unselectable
=
"on"
>
06
<
div
id
=
ext
-gen9
class
=
"x-tool x-tool-toggle"
> </
div
>
07
<
span
class
=
x
-panel-header-text></
span
>
08
</
div
>
09
</
div
>
10
</
div
>
11
</
div
>
12
<
div
id
=
ext
-gen5
class
=
x
-panel-bwrap>
13
<
div
class
=
x
-panel-ml>
14
<
div
class
=
x
-panel-mr>
15
<
div
id
=
ext
-gen8
class
=
x
-panel-mc>
16
<
div
id
=
ext
-gen6
class
=
x
-panel-body></
div
>
17
</
div
>
18
</
div
>
19
</
div
>
20
<
div
id
=
ext
-gen7
class
=
"x-panel-bl x-panel-nofooter"
>
21
<
div
class
=
x
-panel-br>
22
<
div
class
=
x
-panel-bc></
div
>
23
</
div
>
24
</
div
>
25
</
div
>
26
</
div
>
this.container.dom.outerHTML
01
<
body
id
=
ext
-gen3
class
=
" ext-ie ext-ie8"
>
02
<
div
id
=
images
-view
class
=
" x-panel"
>
03
<
div
class
=
x
-panel-tl>
04
<
div
class
=
x
-panel-tr>
05
<
div
class
=
x
-panel-tc>
06
<
div
style
=
"MozUserSelect: none; KhtmlUserSelect: none"
id
=
ext
-gen4
class
=
"x-panel-header x-unselectable"
unselectable
=
"on"
>
07
<
div
id
=
ext
-gen9
class
=
"x-tool x-tool-toggle"
> </
div
>
08
<
span
class
=
x
-panel-header-text></
span
>
09
</
div
>
10
</
div
>
11
</
div
>
12
</
div
>
13
<
div
id
=
ext
-gen5
class
=
x
-panel-bwrap>
14
<
div
class
=
x
-panel-ml>
15
<
div
class
=
x
-panel-mr>
16
<
div
id
=
ext
-gen8
class
=
x
-panel-mc>
17
<
div
id
=
ext
-gen6
class
=
x
-panel-body></
div
>
18
</
div
>
19
</
div
>
20
</
div
>
21
<
div
id
=
ext
-gen7
class
=
"x-panel-bl x-panel-nofooter"
>
22
<
div
class
=
x
-panel-br>
23
<
div
class
=
x
-panel-bc></
div
>
24
</
div
>
25
</
div
>
26
</
div
>
27
</
div
>
28
</
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方法时
01
Ext.Container = Ext.extend(Ext.BoxComponent, {
02
03
//...
04
05
afterRender:
function
(){
06
07
//...
08
if
(!
this
.ownerCt){
09
this
.doLayout(
false
,
true
);
10
}
11
//...
12
},
13
doLayout :
function
(shallow, force){
14
15
//...
16
if
(rendered &&
this
.layout){
17
this
.layout.layout();
18
}
19
//...
20
}
21
22
//...
23
});
当执行到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方法
01
Ext.layout.ContainerLayout = Ext.extend(Object, {
02
//...
03
04
layout :
function
(){
05
//...
06
this
.onLayout(ct, target);
07
//...
08
},
09
onLayout :
function
(ct, target){
10
this
.renderAll(ct, target);
11
},
12
renderAll :
function
(ct, target){
13
var
items = ct.items.items, i, c, len = items.length;
14
for
(i = 0; i < len; i++) {
15
c = items[i];
16
if
(c && (!c.rendered || !
this
.isValidParent(c, target))){
17
this
.renderItem(c, i, target);
18
}
19
}
20
},
21
renderItem :
function
(c, position, target){
22
if
(c){
23
if
(!c.rendered) {
24
c.render(target, position);
25
this
.configureItem(c);
26
}
27
else
if
(!
this
.isValidParent(c, target)){
28
//...
29
}
30
}
31
32
}
33
//...
34
});
调用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方法
01
Ext.DataView = Ext.extend(Ext.BoxComponent, {
02
03
//...
04
05
afterRender :
function
(){
06
//...
07
if
(
this
.store){
08
this
.bindStore(
this
.store,
true
);
09
},
10
bindStore :
function
(store, initial){
11
//...
12
if
(store){
13
this
.refresh();
14
}
15
}
16
},
17
refresh :
function
() {
18
//...
19
this
.tpl.overwrite(el,
this
.collectData(records, 0));
20
//...
21
}
22
//...
23
});
this.refresh()是关键之所在,EXTJS将在这个函数将myData填充到模板之中。到处为上已经全部分析完了,要理解这整个过程的前提是你必须对EXTJS有一定的了解,而不只是会简单使用,就像拖拉控件一样。如果这样的话,你会看的云里雾里,建议你还是不要看为好。
链接:http://www.cnblogs.com/yql1986/archive/2011/03/11/1981446.html
- 分析Ext.DataView结合Ext.Panel是怎么样输出数据
- 分析Ext.DataView结合Ext.Panel是怎么样输出数据
- EXT数据展示(Ext.grid.Panel)
- Highcharts和EXT中panel结合
- Ext.Panel
- ext:panel
- ext panel
- ext panel
- Ext Panel
- Ext.Panel
- ext--panel
- Ext.Panel
- Ext.Panel
- Ext.Panel
- 使用Ext.grid.Panel显示远程数据
- Ext.grid.Panel加载JSON数据
- Ext.dataview.List
- Ext.Window Ext.Panel Ext.TabPanel
- C语言趣味程序百例精解之JAVA实现(56)区分旅客国籍
- Oracle 中的Userenv()
- nginx做proxy对用户header的处理
- CFormView简介
- Struts2 ognl调用action有参数的方法
- 分析Ext.DataView结合Ext.Panel是怎么样输出数据
- shell读取文件方法大全
- Sql养成一个好习惯是一笔财富
- Linux中ifreq 结构体分析和使用
- 分页存储过程示例
- C语言趣味程序百例精解之JAVA实现(83):卡布列克常数
- Android 常用查询
- C语言的学习路线
- 让ubuntu下的eclipse支持GBK编码