extjs中dataview例子

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:00am'],
        ['kids_hug2.jpg', 'images/kids_hug2.jpg',83.81,'9/1 12:00am'],
        ['kids_hug.jpg', 'images/kids_hug.jpg',29.01,'9/1 12:00am'],
        ['sara_pink.jpg', 'images/sara_pink.jpg',29.01,'9/1 12:00am'],
        ['sara_pumpkin.jpg', 'images/sara_pumpkin.jpg',29.01,'9/1 12:00am'],
        ['sara_smile.jpg', 'images/sara_smile.jpg',29.01,'9/1 12:00am'],
        ['up_to_something.jpg', 'images/up_to_something.jpg',29.01,'9/1 12:00am'],
        ['zack.jpg', 'images/zack.jpg',29.01,'9/1 12:00am'],
        ['zack_dress.jpg', 'images/zack_dress.jpg',29.01,'9/1 12:00am'],
        ['zack_hat.jpg', 'images/zack_hat.jpg',29.01,'9/1 12:00am'],
        ['zack_sink.jpg', 'images/zack_sink.jpg',29.01,'9/1 12:00am'],
        ['zacks_grill.jpg', 'images/zacks_grill.jpg',29.01,'9/1 12:00am']
    ];
   
  

    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'name'},
           {name: 'url'},
           {name: 'size', type: 'float'},
           {name:'lastmod', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></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',
        title:'Simple DataView (0 items selected)',

        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',//鼠标悬停item时的类样式,defaults to undefined
            itemSelector:'div.thumb-wrap',//必须项,值为item选择器,此值也可为.thumb-wrap  e.g. div.some-class
            emptyText: 'No images to display',

            plugins: [
                new Ext.DataView.DragSelector(),//拖拽选择
                new Ext.DataView.LabelEditor({dataIndex: 'name'})//可对名称编辑
            ],

            prepareData: function(data){//数据预处理,即数据处理前.data为原始数据,类型为对象.
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                //data.sizeString = Ext.util.Format.fileSize(data.size);
                //data.dateString = data.lastmod.format("n/j h:ia");
                return data;
            },
           
            listeners: {
                selectionchange: {//结点的选择发生改变时,即重新选择结点时,可以更改为selectionchange:function(dv,nodes)...
                    fn: function(dv,nodes){
                        var l = nodes.length;
                        var s = l != 1 ? 's' : '';
                        panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
                    }
                }
            }
        })
    });
    panel.render(document.body);

});