Ext JS4学习教程+笔记（六）DataView面板

Ext JS的DataView控件面板，

可以将一个列表中的数据以统一格式输出在页面上，其类名是Ext.view.View。

测试代码如下：

function viewTest(){

        var  store = Ext.create( 'Ext.data.Store'  ,{

            fields: [ 'name' ,  'thumb'  ],

            proxy:{

               type:  'ajax' ,

               url:  'icons.json' ,

               reader:{

                   type:  'json' ,

                   root:  ''

               }

             }

      });   

      store.load(  function (){

            Ext.create(  'Ext.view.View' ,{

                  renderTo:Ext.getBody(),

                  width:900,

                  tpl: [

                       '<tpl for=".">' ,

                          '<div class="thumb-wrap">'  ,

                                '<img src="icons/{thumb}" /><br/>'  ,

                                '<span>{name}</span>' ,

                           '</div>' ,

                           //'<tpl if="xindex % 4 == 0"><br /></tpl>',

                       '</tpl>'

                  ],

              store:store,

              itemSelector:  'div.thumb-wrap' ,

             

              listeners:{

                  itemdblclick:  function (){

                        Ext.Msg.alert(  'helo' , 'db clicked'  );

                  }

              }

            });   

      });

}

说明：

1，Ext.view.View有3个属性比较重要，一个是store属性，要显示的列表，可以用ajax从外部读入；

icons.json的内容如下：

[
    {
        name: 'Kitchen Sink',
        thumb: 'sink.png',
        url: 'kitchensink',
        type: 'Application'
    },
    {
        name: 'Twitter app',
        thumb: 'twitter.png',
        url: 'twitter',
        type: 'Application'
    }

]

（这里只列出两条，用到了name和thumb两个属性）

另一个是tpl属性，其语法参考Ext.XTemplate的文档，简单说来就是可以用{}符号引用json中的属性；

第三个是itemSelector，这是和tpl配合使用的，表示选中元素的方法。

2，在css中 thumb-wrap 的设置如下，

.thumb-wrap{

     float :  left ;

     margin :  4px  ;

     margin-right :  0 ;

     padding :  5px  ;

}

这样调整面板宽度，就可以实际在一行上显示更多项目。