add extjs 6.0.1 sources

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

/*\r
 * This example features a window with a DataView from which the user can select images to add to a <div> on the page.\r
 * To create the example we create simple subclasses of Window, DataView and Panel. When the user selects an image\r
 * we just add it to the page using the insertSelectedImage function below.\r
 * \r
 * Our subclasses all sit under the Ext.chooser namespace so the first thing we do is tell Ext's class loader that it\r
 * can find those classes in this directory (InfoPanel.js, IconBrowser.js and Window.js). Then we just need to require\r
 * those files and pass in an onReady callback that will be called as soon as everything is loaded.\r
 */\r
Ext.Loader.setConfig({enabled: true});\r
Ext.Loader.setPath('Ext.chooser', '.');\r
\r
Ext.require([\r
    'Ext.button.Button',\r
    'Ext.data.proxy.Ajax',\r
    'Ext.chooser.InfoPanel',\r
    'Ext.chooser.IconBrowser',\r
    'Ext.chooser.Window',\r
    'Ext.ux.DataView.Animated',\r
    'Ext.toolbar.Spacer'\r
]);\r
\r
Ext.onReady(function() {\r
    /*\r
     * This button just opens the window. We render it into the 'buttons' div and set its\r
     * handler to simply show the window\r
     */\r
    var insertButton = Ext.create('Ext.button.Button', {\r
        text: "Insert Image",\r
        renderTo: 'buttons',\r
        handler : function(btn) {\r
            btn.disable();\r
            win.show();\r
        }\r
    });\r
\r
    /*\r
     * This function is called whenever the user selects an image inside the window. It creates\r
     * a new <img> tag inside the 'images' div and immediately hides it. We then call the show() function\r
     * with a duration of 500ms to fade the image in. At the end we call .frame() to give a visual cue\r
     * to the user that the image has been inserted\r
     */\r
    function insertSelectedImage(rec) {\r
        //create the new image tag\r
        var image = Ext.fly('images').createChild({\r
            tag: 'img',\r
            src: 'icons/' + rec.get('thumb')\r
        });\r
        \r
        //hide it straight away then fade it in over 500ms, finally use the frame animation to give emphasis\r
        image.hide().show({duration: 500}).frame();\r
        \r
        //this will make the window animate back to the newly inserted image element\r
        win.animateTarget = image;\r
    }\r
    \r
    /*\r
     * Here is where we create the window from which the user can select images to insert into the 'images' div.\r
     * This window is a simple subclass of Ext.window.Window, and you can see its source code in Window.js.\r
     * All we do here is attach a listener for when the 'selected' event is fired - when this happens it means\r
     * the user has double clicked an image in the window so we call our insertSelectedImage function to add it\r
     * to the DOM.\r
     */\r
    var win = Ext.create('Ext.chooser.Window', {\r
        id: 'img-chooser-dlg',\r
        animateTarget: insertButton.getEl(),\r
        listeners: {\r
            selected: insertSelectedImage,\r
            hide: function() {\r
                insertButton.enable();\r
            }\r
        }\r
    });\r
});