extjs

/**
 *  */
Ext.onReady(function() {
    ImageModel = Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'resourceid'},
           {name: 'title'},
           {name: 'url_Default'},
           {name: 'filesize', type: 'float'},
           {name:'uploaddate', type:'date', dateFormat:'timestamp'}
        ]
    });

	/**
	 * 数据存储
	 */
	var store = new Ext.data.Store({
				// 获取数据的方式
		model: 'ImageModel',
		proxy : new Ext.data.HttpProxy({
					url : 'rms/resManage.ered?reqCode=querySfxmDatas'	//'gridDemo.ered?reqCode=querySfxmDatas'
				}),
		// 数据读取器
		reader : new Ext.data.JsonReader({
					totalProperty : 'TOTALCOUNT', // 记录总数
					root : 'ROOT' // Json中的列表数据根节点
				}, [{
						name : 'resourceid'
				}, {
						name : 'title' // Json中的属性Key值
					}, {
						name : 'url_Default'
					}, {
						name : 'filesize'
					}, {
						name : 'uploaddate'
					}])
			});   
    store.load();

    Ext.create('Ext.Panel', {
        id: 'images-view',
        frame: true,
        collapsible: true,
        width: 535,
        renderTo: 'dataview-example',
        title: 'Simple DataView (0 items selected)',
        items: Ext.create('Ext.view.View', {
            store: store,
            tpl: [
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{title}">',
                    '<div class="thumb"><img src="{url_default}" title="{title}"></div>',
                    '<span class="x-editable">{title}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            multiSelect: true,
            height: 310,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'resourceid'})
            ],
            prepareData: function(data) {
                Ext.apply(data, {
                    shortName: Ext.util.Format.ellipsis(data.title, 15),
                    sizeString: Ext.util.Format.fileSize(data.filesize),
                    dateString: Ext.util.Format.date(data.uploaddate, "m/d/Y g:i a")
                });
                return data;
            },
            listeners: {
                selectionchange: function(dv, nodes ){
                    var l = nodes.length,
                        s = l !== 1 ? 's' : '';
                    this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
                }
            }
        })
    });	
});