examples/image-organizer/imgorg/App.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /*
   8  * Sample Image Organizer utilizing Ext.Direct
   9  * Tagging/Organizing into galleries
  10  * Image uploading
  11  */
  12
  13 Ext.ns('Imgorg','Imgorg.App');
  14 Imgorg.App = function() {
  15     var swfu;
  16     SWFUpload.onload = function() {
  17         var settings = {
  18             flash_url: "SWFUpload/Flash/swfupload.swf",
  19             upload_url: "php/router.php",
  20             file_size_limit: "100 MB",
  21             file_types: "*.*",
  22             file_types_description: "Image Files",
  23             file_upload_limit: 100,
  24             file_queue_limit: 100,
  25             debug: false,
  26             button_placeholder_id: "btnUploadHolder",
  27             button_cursor: SWFUpload.CURSOR.HAND,
  28             button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
  29             file_queued_handler: function(file) {
  30                 Ext.ux.SwfuMgr.fireEvent('filequeued', this, file);
  31             },
  32             upload_start_handler: function(file) {
  33                 Ext.ux.SwfuMgr.fireEvent('uploadstart', this, file);
  34             },
  35             upload_progress_handler: function(file, complete, total) {
  36                 Ext.ux.SwfuMgr.fireEvent('uploadprogress', this, file, complete, total);
  37             },
  38             upload_error_handler: function(file, error, message) {
  39                 Ext.ux.SwfuMgr.fireEvent('uploaderror', this, file, error, message);
  40             },
  41             upload_success_handler: function(file, data, response) {
  42                 Ext.ux.SwfuMgr.fireEvent('uploadsuccess', this, file, data);
  43             },
  44             minimum_flash_version: "9.0.28",
  45             post_params: {
  46                 extAction: 'Images', // The class to use
  47                 extUpload: true,
  48                 extMethod: 'upload'  // The method to execute
  49                 //needs extTID – Transaction ID to associate with this request.
  50             }
  51         };
  52         swfu = new SWFUpload(settings);
  53     };
  54     var view, thumbPanel, uploadPanel, tabPanel;
  55     return {
  56         debugSWF: false,
  57
  58         init: function() {
  59             Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
  60             Ext.QuickTips.init();
  61             Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
  62             Ext.Direct.addProvider(Imgorg.REMOTING_API);
  63
  64             Ext.ux.SwfuMgr.on('filequeued', this.onFileQueued, this);
  65
  66             new Ext.Viewport({
  67                 layout: 'border',
  68                 items: [{
  69                     xtype: 'img-albumtree',
  70                     id: 'album-tree',
  71                     region: 'west',
  72                     width: 180,
  73                     minWidth: 180,
  74                     maxWidth: 180,
  75                     collapsible: true,
  76                     split: true,
  77                     collapseMode: 'mini',
  78                     margins: '5 0 5 5',
  79                     cmargins: '0 0 0 0',
  80                     tbar: [{
  81                         text: 'Add Album',
  82                         iconCls: 'add',
  83                         scale: 'large',
  84                         handler: function() {
  85                             Ext.getCmp('album-tree').addAlbum();
  86                         }
  87                     },{
  88                         text: 'Upload',
  89                         iconCls: 'upload',
  90                         scale: 'large',
  91                         handler: function() {
  92                             swfu.selectFiles();
  93                         }
  94                     }],
  95                     listeners: {
  96                         click: this.onAlbumClick,
  97                         scope: this
  98                     }
  99                 },{
 100                     xtype: 'tabpanel',
 101                     region: 'center',
 102                     id: 'img-tabpanel',
 103                     margins: '5 5 5 0',
 104                     activeItem: 0,
 105                     enableTabScroll: true,
 106                     items: this.getTabs()
 107                 }]
 108             });
 109
 110             tabPanel = Ext.getCmp('img-tabpanel');
 111             thumbPanel = tabPanel.getComponent('images-view');
 112             Imgorg.TagWin = new Imgorg.TagWindow();
 113         },
 114
 115         getTabs: function() {
 116             var tabs = [{
 117                 xtype: 'img-albumspanel',
 118                 title: 'Albums',
 119                 listeners: {
 120                     openalbum: this.onOpenAlbum,
 121                     scope: this
 122                 }
 123             },Ext.apply({
 124                 xtype: 'img-thumbpanel',
 125                 itemId:'images-view'
 126             },this.getImageThumbConfig())];
 127
 128             if (this.debugSWF) {
 129                 tabs.push({
 130                     title: 'debug',
 131                     contentEl: 'SWFUpload_Console',
 132                     listeners: {
 133                         render: function() {
 134                             Ext.fly('SWFUpload_Console').applyStyles({height: '100%', width: '100%'});
 135                         }
 136                     }
 137                 });
 138             }
 139             return tabs;
 140         },
 141
 142         getImageThumbConfig: function() {
 143             return {
 144                 dvConfig: {
 145                     listeners: {
 146                         dblclick: function(view, idx, node, e) {
 147                             var p = this.openImage(view.getStore().getAt(idx));
 148                             p.show();
 149                         },
 150                         viewitem: function(view, node) {
 151                             var recs = view.getSelectedRecords();
 152                             for (var i = 0; i < recs.length; i++) {
 153                                 this.openImage(recs[i]);
 154                             }
 155                         },
 156                         scope: this
 157                     }
 158                 }
 159             };
 160         },
 161
 162         openImage: function(rec) {
 163             return tabPanel.add({
 164                 xtype: 'img-panel',
 165                 title: Ext.util.Format.ellipsis(rec.data.filename,15),
 166                 url: rec.data.url,
 167                 imageData: rec.data
 168             });
 169         },
 170
 171         onOpenAlbum: function(ap, album, name) {
 172             var tab = tabPanel.add(Ext.apply({
 173                 xtype: 'img-thumbpanel',
 174                 closable: true,
 175                 title: 'Album: '+name
 176             },this.getImageThumbConfig()));
 177             tab.albumFilter({
 178                 id: album,
 179                 text: name
 180             });
 181             tab.show();
 182         },
 183
 184         onAlbumClick: function(node, e) {
 185             this.onOpenAlbum(null, node.attributes.id, node.attributes.text);
 186         },
 187
 188         onFileQueued: function(swfu, file) {
 189             if (!uploadPanel) {
 190                 uploadPanel = Ext.getCmp('img-tabpanel').add({
 191                     title: 'Upload Queue',
 192                     xtype: 'img-uploadqueue',
 193                     swfu: swfu
 194                 });
 195                 uploadPanel.show();
 196                 uploadPanel.addFile(swfu, file);
 197             } else {
 198                 uploadPanel.show();
 199             }
 200         },
 201
 202         getSwf: function() {
 203             return swfu;
 204         }
 205     }
 206 }();
 207
 208 Ext.onReady(Imgorg.App.init,Imgorg.App);
 209
 210 Ext.override(Ext.CompositeElementLite,{
 211     removeElement : function(keys, removeDom){
 212         var me = this, els = this.elements, el;
 213             Ext.each(keys, function(val){
 214                     if (el = (els[val] || els[val = me.indexOf(val)])) {
 215                         if(removeDom)
 216                                 el.dom ? el.remove() : Ext.removeNode(el);
 217                         els.splice(val, 1);
 218                         }
 219             });
 220         return this;
 221     }
 222 });