examples/view/chooser/chooser.js

   1 /*
   2  * This example features a window with a DataView from which the user can select images to add to a <div> on the page.
   3  * To create the example we create simple subclasses of Window, DataView and Panel. When the user selects an image
   4  * we just add it to the page using the insertSelectedImage function below.
   5  *
   6  * Our subclasses all sit under the Ext.chooser namespace so the first thing we do is tell Ext's class loader that it
   7  * can find those classes in this directory (InfoPanel.js, IconBrowser.js and Window.js). Then we just need to require
   8  * those files and pass in an onReady callback that will be called as soon as everything is loaded.
   9  */
  10 Ext.Loader.setConfig({enabled: true});
  11 Ext.Loader.setPath('Ext.chooser', '.');
  12 Ext.Loader.setPath('Ext.ux', '../../ux');
  13
  14 Ext.require([
  15     'Ext.button.Button',
  16     'Ext.data.proxy.Ajax',
  17     'Ext.chooser.InfoPanel',
  18     'Ext.chooser.IconBrowser',
  19     'Ext.chooser.Window',
  20     'Ext.ux.DataView.Animated',
  21     'Ext.toolbar.Spacer'
  22 ]);
  23
  24 Ext.onReady(function() {
  25     /*
  26      * This button just opens the window. We render it into the 'buttons' div and set its
  27      * handler to simply show the window
  28      */
  29     var insertButton = Ext.create('Ext.button.Button', {
  30         text: "Insert Image",
  31         renderTo: 'buttons',
  32         handler : function() {
  33             win.show();
  34         }
  35     });
  36
  37     /*
  38      * Here is where we create the window from which the user can select images to insert into the 'images' div.
  39      * This window is a simple subclass of Ext.window.Window, and you can see its source code in Window.js.
  40      * All we do here is attach a listener for when the 'selected' event is fired - when this happens it means
  41      * the user has double clicked an image in the window so we call our insertSelectedImage function to add it
  42      * to the DOM (see below).
  43      */
  44     var win = Ext.create('Ext.chooser.Window', {
  45         id: 'img-chooser-dlg',
  46         animateTarget: insertButton.getEl(),
  47         listeners: {
  48             selected: insertSelectedImage
  49         }
  50     });
  51
  52     /*
  53      * This function is called whenever the user double-clicks an image inside the window. It creates
  54      * a new <img> tag inside the 'images' div and immediately hides it. We then call the show() function
  55      * with a duration of 500ms to fade the image in. At the end we call .frame() to give a visual cue
  56      * to the user that the image has been inserted
  57      */
  58     function insertSelectedImage(image) {
  59         //create the new image tag
  60         var image = Ext.fly('images').createChild({
  61             tag: 'img',
  62             src: 'icons/' + image.get('thumb')
  63         });
  64
  65         //hide it straight away then fade it in over 500ms, finally use the frame animation to give emphasis
  66         image.hide().show({duration: 500}).frame();
  67
  68         //this will make the window animate back to the newly inserted image element
  69         win.animateTarget = image;
  70     }
  71 });