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