分析Ext.DataView结合Ext.Panel是怎么样输出数据

转自：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中的截图

                                                                                             图(1)
    下面来简单分析下， EXTJS是怎么样呈现这样的界面，其大致执行流程，用以加深对EXTJS的理解，也便于自己日后写扩展。下面的截图是用StarUML画出上面的代码所涉及到有关"类"和组件之间的关系图

                                                                                                      图(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可以很清楚的看到

                                                                                                          图(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方法。 

?

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有一定的了解，而不只是会简单使用,就像拖拉控件一样。如果这样的话，你会看的云里雾里,建议你还是不要看为好。