www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext2/examples/view/data-view.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function(){ var xd = Ext.data; var store = new Ext.data.JsonStore({ url: 'get-images.php', root: 'images', fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}] }); store.load(); 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 with editable labels, multi and drag selection', 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', plugins: [ new Ext.DataView.DragSelector(), new Ext.DataView.LabelEditor({dataIndex: 'name'}) ], prepareData: function(data){ data.shortName = Ext.util.Format.ellipsis(data.name, 15); data.sizeString = Ext.util.Format.fileSize(data.size); data.dateString = data.lastmod.format("m/d/Y g:i a"); return data; } }) }); panel.render(document.body); });