Ext.onReady(function(){Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'src', type:'string' },
        { name:'caption', type:'string' }
    ]
});

Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: [
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' },
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' },
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
    ]
});

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

//Ext.create('Ext.view.View', {
//    store: Ext.data.StoreManager.lookup('imagesStore'),
//   tpl: imageTpl,
//    trackOver: true,
//    itemSelector: 'div.thumb-wrap',
//    emptyText: 'No images available',
//    plugins: [
//              Ext.create('Ext.ux.DataView.DragSelector', {}),
//              Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
//          ],
//    renderTo: Ext.getBody()
//});
Ext.create('Ext.Panel', {
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 535,
    renderTo:Ext.getBody(),
    title: 'Simple DataView (0 items selected)',
    items:Ext.create('Ext.view.View', {
      store: Ext.data.StoreManager.lookup('imagesStore'),
      tpl: imageTpl,
       trackOver: true,
       itemSelector: 'div.thumb-wrap',
       emptyText: 'No images available',
       plugins: [
                 Ext.create('Ext.ux.DataView.DragSelector', {}),
                 Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
             ]
    })
});
});
/*Ext.create('Ext.Panel', {
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 535,
    renderTo:Ext.getBody(),
    title: 'Simple DataView (0 items selected)',
    items: Ext.create('Ext.view.View', {
    	store: Ext.data.StoreManager.lookup('imagesStore'),
        tpl: [
            '<tpl for=".">',
            '<div><div><div style="position: absolute; left: 0; top: 0"><input type="checkbox" name="ids" /></div>',
               '<div class="thumb-wrap" id="{caption}">',
                '<div class="thumb"><img src="{src}" title="{caption}"></div>',
                '<span class="x-editable">{caption}</span></div></div>',
            '</tpl>',
            '<div class="x-clear"></div></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: 'name'})
        ],
        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "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)');
            }
        }
    })
});
});*/