list-view.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:2k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */
  2. Ext.onReady(function(){
  3.     var store = new Ext.data.JsonStore({
  4.         url: 'get-images.php',
  5.         root: 'images',
  6.         fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
  7.     });
  8.     store.load();
  9.     var listView = new Ext.ListView({
  10.         store: store,
  11.         multiSelect: true,
  12.         emptyText: 'No images to display',
  13.         reserveScrollOffset: true,
  14.         columns: [{
  15.             header: 'File',
  16.             width: .5,
  17.             dataIndex: 'name'
  18.         },{
  19.             header: 'Last Modified',
  20.             width: .35, 
  21.             dataIndex: 'lastmod',
  22.             tpl: '{lastmod:date("m-d h:i a")}'
  23.         },{
  24.             header: 'Size',
  25.             dataIndex: 'size',
  26.             tpl: '{size:fileSize}',
  27.             align: 'right'
  28.         }]
  29.     });
  30.     
  31.     // put it in a Panel so it looks pretty
  32.     var panel = new Ext.Panel({
  33.         id:'images-view',
  34.         width:425,
  35.         height:250,
  36.         collapsible:true,
  37.         layout:'fit',
  38.         title:'Simple ListView <i>(0 items selected)</i>',
  39.         items: listView
  40.     });
  41.     panel.render(document.body);
  42.     // little bit of feedback
  43.     listView.on('selectionchange', function(view, nodes){
  44.         var l = nodes.length;
  45.         var s = l != 1 ? 's' : '';
  46.         panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
  47.     });
  48. });