GridPanel之DataView使用

在ext的扩展中为我们提供了实现多行多列效果DataView

var dataview = new Ext.DataView({

                   tpl:new Ext.XTemplate(

                         '<ul>',

                               '<tpl for=".">',

                                     '<li>',

                                           '<img width="64" height="64" src="{[values.spic]}" />',   //values 即store的record

                                     '</li>',

                               '</tpl>',

                         '</ul>'

                   ),

                   store: [],

                   plugins : [

                         new Ext.ux.DataViewTransition({

                               duration   : 550,

                               idProperty: 'id'

                         })

                   ],

                   id: 'ImgList',

                   itemSelector: 'li.phone',

                   overClass: 'phone-hover',

                   singleSelect: true,

                   multiSelect: true,

                   autoScroll: true

          });

var store = new Ext.data.ArrayStore({

                   proxy:new Ext.data.HttpProxy({

                          url:'/Bas/Data/Bas_GetImgListBypItemId.ashx?itemid=<% =_itemid %>',

                          method: 'GET'

                   }),

                   fields:['id', 'itemid', 'isremote', 'source', 'spic', 'bpic', 'mpic', 'up_time'],

                   sortInfo:{

                         field: 'id',

                         direction: 'ASC'

                       },

                 listeners:{load:function(s,r,o){

                      var _dv = Ext.getCmp("ImgList");

                      if(_dv){

                         _dv.bindStore(s);

                      }

                 }}       

           });

           

           store.load();

new Ext.Panel({

                   title: '图片列表',

                   layout: 'fit',

                   items: dataview,

                   anchor:'100%',

                   height:300,  

                   renderTo:'dvImg'

          });

最终效果