Ext.DataView 一种使用定制的模板布局和格式展示数据的机制。 DataView使用一个Ext.XTemplate作为其内部的模板机制, 并被绑定到一个Ext.data.Store, 这样当store中的数据发生变化时视图将自动同步以反应变化。 视图也内建了对许多可能发生的通用事件的处理,包含项目被单击、双击、鼠标滑过、鼠标移出等等, 同时也有一个内建的选择模型(selection model)。为了使用这些特性,必须为DataView提供一个itemSelector配置项, 用来决定与哪个节点配合使用。
以下是使用Ext.DataView和Ext.Panel输出数据
01 | <script type= "text/javascript" > |
03 | Ext.onReady( function () { |
06 | var store = new Ext.data.ArrayStore({ |
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' } |
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' ] |
51 | store.loadData(myData); |
53 | var tpl = new Ext.XTemplate( '<tpl for=".">' , |
54 | '<div class="thumb-wrap">' , |
56 | '<td>{company}</td><td>{price}</td><td>{change}</td><td>{pctChange}</td><td>{lastChange}</td>' , |
60 | '<div class="x-clear"></div>' ); |
62 | var panel = new Ext.Panel({ |
70 | title: 'Simple DataView' , |
72 | items: new Ext.DataView({ |
77 | overClass: 'x-view-over' , |
78 | itemSelector: 'div.thumb-wrap' , |
79 | emptyText: 'No images to display' |
82 | panel.render(document.body); |
以下是上面的代码执行之后在IE8中的截图
图(1)
下面来简单分析下, EXTJS是怎么样呈现这样的界面,其大致执行流程,用以加深对EXTJS的理解,也便于自己日后写扩展。下面的截图是用StarUML画出上面的代码所涉及到有关"类"和组件之间的关系图
图(2)
01 | var panel = new Ext.Panel({ |
03 | items: new Ext.DataView({ |
08 | overClass: 'x-view-over' , |
09 | itemSelector: 'div.thumb-wrap' , |
10 | emptyText: 'No images to display' |
当实例化Panel时候会先实例化传入的object literal中的items。根据图(2)中Ext.DataView中继承关系和之前一篇文章Extjs- Ext.extend函数的使用知道 Ext.DataView 中传入的object literal中将会传入至Ext.Component的constructor中。
01 | Ext.Component = function (config){ |
07 | Ext.Component.AUTO_ID = 1000; |
09 | Ext.extend(Ext.Component, Ext.util.Observable, { |
12 | 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可以很清楚的看到
图(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, { |
03 | render : function (container, position){ |
04 | if (! this .rendered && this .fireEvent( 'beforerender' , this ) !== false ){ |
07 | this .onRender( this .container, position || null ); |
11 | this .afterRender( this .container); |
当执行到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, { |
05 | onRender : function (ct, position){ |
07 | Ext.Panel.superclass.onRender.call( this , ct, position); |
17 | Ext.extend(Ext.Component, Ext.util.Observable, { |
21 | onRender : function (ct, position){ |
当程序执行到this.afterRender(this.container)时候,查看此时生成EXTJS产生的HTML代码
this.container.dom.innerHTML
01 | < div id = images -view class = " x-panel" > |
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 > |
12 | < div id = ext -gen5 class = x -panel-bwrap> |
15 | < div id = ext -gen8 class = x -panel-mc> |
16 | < div id = ext -gen6 class = x -panel-body></ div > |
20 | < div id = ext -gen7 class = "x-panel-bl x-panel-nofooter" > |
22 | < div class = x -panel-bc></ div > |
this.container.dom.outerHTML
01 | < body id = ext -gen3 class = " ext-ie ext-ie8" > |
02 | < div id = images -view class = " x-panel" > |
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 > |
13 | < div id = ext -gen5 class = x -panel-bwrap> |
16 | < div id = ext -gen8 class = x -panel-mc> |
17 | < div id = ext -gen6 class = x -panel-body></ div > |
21 | < div id = ext -gen7 class = "x-panel-bl x-panel-nofooter" > |
23 | < div class = x -panel-bc></ div > |
< 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, { |
05 | afterRender: function (){ |
09 | this .doLayout( false , true ); |
13 | doLayout : function (shallow, force){ |
16 | if (rendered && this .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方法
01 | Ext.layout.ContainerLayout = Ext.extend(Object, { |
06 | this .onLayout(ct, target); |
09 | onLayout : function (ct, target){ |
10 | this .renderAll(ct, target); |
12 | renderAll : function (ct, target){ |
13 | var items = ct.items.items, i, c, len = items.length; |
14 | for (i = 0; i < len; i++) { |
16 | if (c && (!c.rendered || ! this .isValidParent(c, target))){ |
17 | this .renderItem(c, i, target); |
21 | renderItem : function (c, position, target){ |
24 | c.render(target, position); |
25 | this .configureItem(c); |
27 | 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方法
01 | Ext.DataView = Ext.extend(Ext.BoxComponent, { |
05 | afterRender : function (){ |
08 | this .bindStore( this .store, true ); |
10 | bindStore : function (store, initial){ |
19 | this .tpl.overwrite(el, this .collectData(records, 0)); |
this.refresh()是关键之所在,EXTJS将在这个函数将myData填充到模板之中。到处为上已经全部分析完了,要理解这整个过程的前提是你必须对EXTJS有一定的了解,而不只是会简单使用,就像拖拉控件一样。如果这样的话,你会看的云里雾里,建议你还是不要看为好。
链接:http://www.cnblogs.com/yql1986/archive/2011/03/11/1981446.html