--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+ var xd = Ext.data;\r
+\r
+ var store = new Ext.data.JsonStore({\r
+ url: 'get-images.php',\r
+ root: 'images',\r
+ fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]\r
+ });\r
+ store.load();\r
+\r
+ var tpl = new Ext.XTemplate(\r
+ '<tpl for=".">',\r
+ '<div class="thumb-wrap" id="{name}">',\r
+ '<div class="thumb"><img src="{url}" title="{name}"></div>',\r
+ '<span class="x-editable">{shortName}</span></div>',\r
+ '</tpl>',\r
+ '<div class="x-clear"></div>'\r
+ );\r
+\r
+ var panel = new Ext.Panel({\r
+ id:'images-view',\r
+ frame:true,\r
+ width:535,\r
+ autoHeight:true,\r
+ collapsible:true,\r
+ layout:'fit',\r
+ title:'Simple DataView (0 items selected)',\r
+\r
+ items: new Ext.DataView({\r
+ store: store,\r
+ tpl: tpl,\r
+ autoHeight:true,\r
+ multiSelect: true,\r
+ overClass:'x-view-over',\r
+ itemSelector:'div.thumb-wrap',\r
+ emptyText: 'No images to display',\r
+\r
+ plugins: [\r
+ new Ext.DataView.DragSelector(),\r
+ new Ext.DataView.LabelEditor({dataIndex: 'name'})\r
+ ],\r
+\r
+ prepareData: function(data){\r
+ data.shortName = Ext.util.Format.ellipsis(data.name, 15);\r
+ data.sizeString = Ext.util.Format.fileSize(data.size);\r
+ data.dateString = data.lastmod.format("m/d/Y g:i a");\r
+ return data;\r
+ },\r
+ \r
+ listeners: {\r
+ selectionchange: {\r
+ fn: function(dv,nodes){\r
+ var l = nodes.length;\r
+ var s = l != 1 ? 's' : '';\r
+ panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');\r
+ }\r
+ }\r
+ }\r
+ })\r
+ });\r
+ panel.render(document.body);\r
+\r
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff