add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / view / data-view.js

Ext.require([\r
    'Ext.data.*',\r
    'Ext.util.*',\r
    'Ext.view.View',\r
    'Ext.ux.DataView.DragSelector',\r
    'Ext.ux.DataView.LabelEditor'\r
]);\r
\r
Ext.onReady(function(){\r
    ImageModel = Ext.define('ImageModel', {\r
        extend: 'Ext.data.Model',\r
        fields: [\r
           {name: 'name'},\r
           {name: 'url'},\r
           {name: 'size', type: 'float'},\r
           {name:'lastmod', type:'date', dateFormat:'timestamp'}\r
        ]\r
    });\r
\r
    var store = Ext.create('Ext.data.Store', {\r
        model: 'ImageModel',\r
        proxy: {\r
            type: 'ajax',\r
            url: 'get-images.php',\r
            reader: {\r
                type: 'json',\r
                rootProperty: 'images'\r
            }\r
        }\r
    });\r
    store.load();\r
\r
    Ext.create('Ext.Panel', {\r
        id: 'images-view',\r
        frame: true,\r
        collapsible: true,\r
        width: 535,\r
        renderTo: 'dataview-example',\r
        title: 'Simple DataView (0 items selected)',\r
        items: Ext.create('Ext.view.View', {\r
            store: store,\r
            tpl: [\r
                '<tpl for=".">',\r
                    '<div class="thumb-wrap" id="{name:stripTags}">',\r
                        '<div class="thumb"><img src="{url}" title="{name:htmlEncode}"></div>',\r
                        '<span class="x-editable">{shortName:htmlEncode}</span>',\r
                    '</div>',\r
                '</tpl>',\r
                '<div class="x-clear"></div>'\r
            ],\r
            selectionModel: {\r
                mode   : 'MULTI'\r
            },\r
            height: 310,\r
            trackOver: true,\r
            overItemCls: 'x-item-over',\r
            itemSelector: 'div.thumb-wrap',\r
            emptyText: 'No images to display',\r
            plugins: [\r
                Ext.create('Ext.ux.DataView.DragSelector', {}),\r
                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})\r
            ],\r
            prepareData: function(data) {\r
                Ext.apply(data, {\r
                    shortName: Ext.util.Format.ellipsis(data.name, 15),\r
                    sizeString: Ext.util.Format.fileSize(data.size),\r
                    dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")\r
                });\r
                return data;\r
            },\r
            listeners: {\r
                selectionchange: function(dv, nodes ){\r
                    var l = nodes.length,\r
                        s = l !== 1 ? 's' : '';\r
                    this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');\r
                }\r
            }\r
        })\r
    });\r
});