docs/source/App1.html

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