examples/view/chooser/chooser.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /*
  16  * This example features a window with a DataView from which the user can select images to add to a <div> on the page.
  17  * To create the example we create simple subclasses of Window, DataView and Panel. When the user selects an image
  18  * we just add it to the page using the insertSelectedImage function below.
  19  *
  20  * Our subclasses all sit under the Ext.chooser namespace so the first thing we do is tell Ext's class loader that it
  21  * can find those classes in this directory (InfoPanel.js, IconBrowser.js and Window.js). Then we just need to require
  22  * those files and pass in an onReady callback that will be called as soon as everything is loaded.
  23  */
  24 Ext.Loader.setConfig({enabled: true});
  25 Ext.Loader.setPath('Ext.chooser', '.');
  26 Ext.Loader.setPath('Ext.ux', '../../ux');
  27
  28 Ext.require([
  29     'Ext.button.Button',
  30     'Ext.data.proxy.Ajax',
  31     'Ext.chooser.InfoPanel',
  32     'Ext.chooser.IconBrowser',
  33     'Ext.chooser.Window',
  34     'Ext.ux.DataView.Animated',
  35     'Ext.toolbar.Spacer'
  36 ]);
  37
  38 Ext.onReady(function() {
  39     /*
  40      * This button just opens the window. We render it into the 'buttons' div and set its
  41      * handler to simply show the window
  42      */
  43     var insertButton = Ext.create('Ext.button.Button', {
  44         text: "Insert Image",
  45         renderTo: 'buttons',
  46         handler : function() {
  47             win.show();
  48         }
  49     });
  50
  51     /*
  52      * Here is where we create the window from which the user can select images to insert into the 'images' div.
  53      * This window is a simple subclass of Ext.window.Window, and you can see its source code in Window.js.
  54      * All we do here is attach a listener for when the 'selected' event is fired - when this happens it means
  55      * the user has double clicked an image in the window so we call our insertSelectedImage function to add it
  56      * to the DOM (see below).
  57      */
  58     var win = Ext.create('Ext.chooser.Window', {
  59         id: 'img-chooser-dlg',
  60         animateTarget: insertButton.getEl(),
  61         listeners: {
  62             selected: insertSelectedImage
  63         }
  64     });
  65
  66     /*
  67      * This function is called whenever the user double-clicks an image inside the window. It creates
  68      * a new <img> tag inside the 'images' div and immediately hides it. We then call the show() function
  69      * with a duration of 500ms to fade the image in. At the end we call .frame() to give a visual cue
  70      * to the user that the image has been inserted
  71      */
  72     function insertSelectedImage(image) {
  73         //create the new image tag
  74         var image = Ext.fly('images').createChild({
  75             tag: 'img',
  76             src: 'icons/' + image.get('thumb')
  77         });
  78
  79         //hide it straight away then fade it in over 500ms, finally use the frame animation to give emphasis
  80         image.hide().show({duration: 500}).frame();
  81
  82         //this will make the window animate back to the newly inserted image element
  83         win.animateTarget = image;
  84     }
  85 });