Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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 });