 // consume JSON of this form:
// consume JSON of this form:



 {
{
 "images":[
   "images":[

 
       {
{
 "name":"dance_fever.jpg",
         "name":"dance_fever.jpg",
 "size":2067,
         "size":2067,
 "lastmod":1236974993000,
         "lastmod":1236974993000,
 "url":"images\/thumbs\/dance_fever.jpg"
         "url":"images\/thumbs\/dance_fever.jpg"
 },
      },

 
       {
{
 "name":"zack_sink.jpg",
         "name":"zack_sink.jpg",
 "size":2303,
         "size":2303,
 "lastmod":1236974993000,
         "lastmod":1236974993000,
 "url":"images\/thumbs\/zack_sink.jpg"
         "url":"images\/thumbs\/zack_sink.jpg"
 }
      }
 ]
   ]
 }
} 

 var store = new Ext.data.JsonStore(
var store = new Ext.data.JsonStore( {
{
 url: 'get-images.php',
    url: 'get-images.php',
 root: 'images',
    root: 'images',
 fields: [
    fields: [
 'name', 'url',
        'name', 'url',

 
         {name:'size', type: 'float'},
{name:'size', type: 'float'},

 
         {name:'lastmod', type:'date', dateFormat:'timestamp'}
{name:'lastmod', type:'date', dateFormat:'timestamp'}
 ]
    ]
 });
});
 store.load();
store.load();


 var listView = new Ext.ListView(
var listView = new Ext.ListView( {
{
 store: store,
    store: store,
 multiSelect: true,
    multiSelect: true,
 emptyText: 'No images to display',
    emptyText: 'No images to display',
 reserveScrollOffset: true,
    reserveScrollOffset: true,

 columns: [
    columns: [ {
{
 header: 'File',
        header: 'File',
 width: .5,
        width: .5,
 dataIndex: 'name'
        dataIndex: 'name'

 },
    }, {
{
 header: 'Last Modified',
        header: 'Last Modified',
 width: .35,
        width: .35, 
 dataIndex: 'lastmod',
        dataIndex: 'lastmod',
 tpl: '{lastmod:date("m-d h:i a")}'
        tpl: '{lastmod:date("m-d h:i a")}'

 },
    }, {
{
 header: 'Size',
        header: 'Size',
 dataIndex: 'size',
        dataIndex: 'size',
 tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()

 align: 'right'
        align: 'right'
 }]
    }]
 });
});

 // put it in a Panel so it looks pretty
// put it in a Panel so it looks pretty


 var panel = new Ext.Panel(
var panel = new Ext.Panel( {
{
 id:'images-view',
    id:'images-view',
 width:425,
    width:425,
 height:250,
    height:250,
 collapsible:true,
    collapsible:true,
 layout:'fit',
    layout:'fit',
 title:'Simple ListView (0 items selected)',
    title:'Simple ListView (0 items selected)',
 items: listView
    items: listView
 });
});
 panel.render(document.body);
panel.render(document.body);

 // little bit of feedback
// little bit of feedback


 listView.on('selectionchange', function(view, nodes)
listView.on('selectionchange', function(view, nodes) {
{
 var l = nodes.length;
    var l = nodes.length;
 var s = l != 1 ? 's' : '';
    var s = l != 1 ? 's' : '';
 panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
 });
});posted on 2009-09-23 09:50 
紫蝶∏飛揚↗ 阅读(4539) 
评论(1)  编辑  收藏  所属分类: 
EXTJS