add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / view / chooser / InfoPanel.js

/**\r
 * @class Ext.chooser.InfoPanel\r
 * @extends Ext.panel.Panel\r
 * @author Ed Spencer\r
 * \r
 * This panel subclass just displays information about an image. We have a simple template set via the tpl property,\r
 * and a single function (loadRecord) which updates the contents with information about another image.\r
 */\r
Ext.define('Ext.chooser.InfoPanel', {\r
    extend: 'Ext.panel.Panel',\r
    alias : 'widget.infopanel',\r
    id: 'img-detail-panel',\r
\r
    width: 150,\r
    minWidth: 150,\r
\r
    tpl: [\r
        '<div class="details">',\r
            '<tpl for=".">',\r
                '<img src="icons/{thumb}" />',\r
                '<div class="details-info">',\r
                    '<b>Example Name:</b>',\r
                    '<span>{name}</span>',\r
                    '<b>Example URL:</b>',\r
                    '<span><a href="http://dev.sencha.com/deploy/touch/examples/{url}" target="_blank">{url}.html</a></span>',\r
                    '<b>Type:</b>',\r
                    '<span>{type}</span>',\r
                '</div>',\r
            '</tpl>',\r
        '</div>'\r
    ],\r
    \r
    afterRender: function(){\r
        this.callParent();\r
        if (!Ext.isWebKit) {\r
            this.el.on('click', function(){\r
                alert('The Sencha Touch examples are intended to work on WebKit browsers. They may not display correctly in other browsers.');\r
            }, this, {delegate: 'a'});\r
        }    \r
    },\r
\r
    /**\r
     * Loads a given image record into the panel. Animates the newly-updated panel in from the left over 250ms.\r
     */\r
    loadRecord: function(image) {\r
        this.body.hide();\r
        this.tpl.overwrite(this.body, image.data);\r
        this.body.slideIn('l', {\r
            duration: 250\r
        });\r
    },\r
    \r
    clear: function(){\r
        this.body.update('');\r
    }\r
});