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

最新推荐文章于 2023-01-07 10:00:00 发布
最新推荐文章于 2023-01-07 10:00:00 发布
阅读量1k 收藏
点赞数
分类专栏： sencha touch 文章标签： function constructor class extjs layout firebug

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

搜索过的问题集合（主要是Ext.js5）
鹿惊的博客
02-01 1044
用Excel做了每一日的工作总结，搜索到了什么问题，学习到了什么方法。积累了很多。公司在来年会用winform开发，用C#写。这不是我的技术方向，所以开年后我会去往北京。这些链接做一个整理。 我很舍不得这个公司，我是个新手，没有编程的基础，专业也不和计算机相关。我从入职的第一天开始就想要发挥自己的能力。我拼命的做，但是总不能得到自己的满意。因为我在这个公司实在学习到了太多的东西，我只是希望我的付出
Ext组件描述，各个组件含义
06-23
**2.2 DataView (Ext.DataView)** - **xtype**: `dataview` - **功能描述**：DataView 是一个灵活的数据展示组件，可以用来展示列表、网格或图标视图。 - **主要用途**：适合展示大量数据，并且可以根据用户需求...
Ext.DataView 图片列表显示
07-16
//得到后台的数据 var proxy = new Ext.data.HttpProxy({ url:showUrl, timeout:3600000 }); //分页参数 findParams ={start:0,limit:limit}; // reader 如何解析数据 var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{1}条的记录，一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext.PagingToolbar.prototype.doLoad=function(start){ findParams.start = start; this.store.reload(); }; var dataview = new Ext.DataView({ store: store, tpl : tpl, id: 'phones', itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : false, autoScroll : true }); new Ext.Panel({ layout: 'fit', items : dataview, height: document.body.clientHeight, width: document.body.clientWidth, title: myTitle, bbar:pagebar, tbar : myTbar, renderTo: 'imageList' });
Extjs 之dataview布局
weixin_34380296的博客
07-14 422
2019独角兽企业重金招聘Python工程师标准>>> ...
extjs中dataview例子
superman
03-22 378
Ext.onReady(function(){         var myData = [         ['dance_fever.jpg', 'images/dance_fever.jpg',71.72,'9/1 12:00am'],         ['gangster_zack.jpg', 'images/gangster_zack.jpg',29.01,'9/1 12:00...
将Ext.DataView组件发挥到极致
tanguoshuai的博客
04-28 405
前些日子在项目中使用到Ext.DataView组件，发现Ext.DataView组件非常的强大，基本上能满足各种html上呈现的需求。Ext.DataView组件必须和Ext.XTemplate结合起来使用，通过Ext.data.JsonStore动态取数据，达到动态生成DataView图形呈现的目的，下面附两幅图说明一下Ext.DataView的强大。 图一（文件夹管理）： ...
Ext.DataView 实现图片列表显示与分页技术解析
Ext JS提供了大量的组件，比如表格、窗体、按钮、面板、数据视图(DataView)等，支持各种布局方式，并且与主流浏览器兼容。 ### 知识点二：Ext.DataView组件解析 Ext.DataView组件是Ext JS中的一个重要组件，它用于...
Ext.js 中与后台数据库交互详解
"这篇资料主要介绍了ExtJS框架中与后台数据库交互的相关知识，包括Ext.data包中的类、数据存储（Store）、数据视图类以及Viewport和Panel组件的应用。" 在ExtJS开发中，与后台数据库的交互是核心部分，本资料详细...
.net post提交后接收返回数据_在.net中使用Dapper操作数据库（一）
weixin_39624700的博客
11-27 153
一、什么是Dapper？Dapper是一款轻量级的ORM，用于在程序中对数据库进行增删改查操作。二、Dapper有什么特点？1、配置简单。Dapper是开源的，可以在项目中添加cs类文件进行引用，也可以直接引用dll。2、使用方便。增删改查操作非常简单，大大减少代码量。3、高性能。执行效率接近原生的ADO.NET，更是远远超过EF框架。三、在项目中引入Dapper本例使用NuGet程序包安装。在V...
extjs dataview 显示图片 横向
04-20
主要的四个文件 博文链接：https://zhao103804.iteye.com/blog/1884445
Extjs 页面布局以及dataview的使用
weixin_34080571的博客
03-25 837
Ext.onReady(function(){ var myData = [ ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE...
ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图
Tina Salangane's Blog -Study Word
02-13 962
本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，同时Ext为其提供了基
关于Ext.DataView选择当前数据的问题
kamarl0的专栏
10-04 388
DataView 需要配置multiSelect: true参数，调用DataView的getSelectedNodes()方法时，才能返回已选择的数组，否则返回的数组始终为空。
Ext.Net中，DataView数据绑定之使用技巧。
weixin_38169786的博客
05-15 110
（近期会连续更新有关Ext.Net 控件的一些资料，与大家分享，有兴趣或者最近也在研究这方面知识的朋友可以加关注！！！） DataView 是一种数据视图控件，与GridPanel相比，最大的优势就是在内容上，布局可以随心所欲。 DataView 数据绑定的方法和GridPanel是一样的。 用过GridPanel的朋友一定相当清楚：GridPanel在数据绑定的时候，只要在对应控...
ExtJS - UI组件 - DataView
重庆熊猫
01-07 89
转载请注明出处:https://www.cnblogs.com/cqpanda/p/17019670.htmlExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 更新记录 2023年1月2日 从笔记迁移到博客。 说明 实例 实例：基本使用1 Ext.create('Ext.view.View', { //定义数据来源 ...
【Ext.Net学习笔记】04：Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法...
05-28 221
之前的几篇文章都是介绍Ext.Net较为基础的东西，今天的这一篇将介绍数据的一些用法，包括XTemplate绑定数据、Store（Modal、Proxy）、ComboBox的用法等。 XTemplate绑定数据 XTemplate是个模板，当我们为一个XTemplate绑定数据之后，将会按照模板的预定格式进行显示。 <ext:Window runat="server" I...
Extjs dataView 详解
weixin_30820151的博客
11-18 556
(一)js 1 var store = new Ext.data.JsonStore({ 2 url: 'get-images.php', 3 root: 'images', 4 fields: [ 5 'name', 'url', 6 {name:'size', type: 'float'}, 7 {name:'lastmod', type:'date', dat...
EXTJS中的DataView数据展示与RadioGroup数据筛选
sky08050025的专栏
05-18 3425
如下图是一个DataView数据展示与RadioGroup数据筛选的简单例子：代码如下：Ext.BLANK_IMAGE_URL='ext-3.2.0/resources/images/default/tree/s.gif'; Ext.onReady(function(){ var store=new Ext.data.JsonStore({ url: 'xxx.aspx', baseParams :{action:'getInfos',sort:so
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值