Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / view / chooser.js
index 9b28d76..b9e36e2 100644 (file)
 /*!
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
  */
-var ImageChooser = function(config){\r
-       this.config = config;\r
-}\r
-\r
-ImageChooser.prototype = {\r
-    // cache data by image name for easy lookup\r
-    lookup : {},\r
-\r
-       show : function(el, callback){\r
-               if(!this.win){\r
-                       this.initTemplates();\r
-\r
-                       this.store = new Ext.data.JsonStore({\r
-                           url: this.config.url,\r
-                           root: 'images',\r
-                           fields: [\r
-                               'name', 'url',\r
-                               {name:'size', type: 'float'},\r
-                               {name:'lastmod', type:'date', dateFormat:'timestamp'}\r
-                           ],\r
-                           listeners: {\r
-                               'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}\r
-                           }\r
-                       });\r
-                       this.store.load();\r
-\r
-                       var formatSize = function(data){\r
-                       if(data.size < 1024) {\r
-                           return data.size + " bytes";\r
-                       } else {\r
-                           return (Math.round(((data.size*10) / 1024))/10) + " KB";\r
-                       }\r
-                   };\r
-\r
-                       var formatData = function(data){\r
-                       data.shortName = data.name.ellipse(15);\r
-                       data.sizeString = formatSize(data);\r
-                       data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
-                       this.lookup[data.name] = data;\r
-                       return data;\r
-                   };\r
-\r
-                   this.view = new Ext.DataView({\r
-                               tpl: this.thumbTemplate,\r
-                               singleSelect: true,\r
-                               overClass:'x-view-over',\r
-                               itemSelector: 'div.thumb-wrap',\r
-                               emptyText : '<div style="padding:10px;">No images match the specified filter</div>',\r
-                               store: this.store,\r
-                               listeners: {\r
-                                       'selectionchange': {fn:this.showDetails, scope:this, buffer:100},\r
-                                       'dblclick'       : {fn:this.doCallback, scope:this},\r
-                                       'loadexception'  : {fn:this.onLoadException, scope:this},\r
-                                       'beforeselect'   : {fn:function(view){\r
-                                       return view.store.getRange().length > 0;\r
-                                   }}\r
-                               },\r
-                               prepareData: formatData.createDelegate(this)\r
-                       });\r
-\r
-                       var cfg = {\r
-                       title: 'Choose an Image',\r
-                       id: 'img-chooser-dlg',\r
-                       layout: 'border',\r
-                               minWidth: 500,\r
-                               minHeight: 300,\r
-                               modal: true,\r
-                               closeAction: 'hide',\r
-                               border: false,\r
-                               items:[{\r
-                                       id: 'img-chooser-view',\r
-                                       region: 'center',\r
-                                       autoScroll: true,\r
-                                       items: this.view,\r
-                    tbar:[{\r
-                       text: 'Filter:'\r
-                    },{\r
-                       xtype: 'textfield',\r
-                       id: 'filter',\r
-                       selectOnFocus: true,\r
-                       width: 100,\r
-                       listeners: {\r
-                               'render': {fn:function(){\r
-                                                       Ext.getCmp('filter').getEl().on('keyup', function(){\r
-                                                               this.filter();\r
-                                                       }, this, {buffer:500});\r
-                               }, scope:this}\r
-                       }\r
-                    }, ' ', '-', {\r
-                       text: 'Sort By:'\r
-                    }, {\r
-                       id: 'sortSelect',\r
-                       xtype: 'combo',\r
-                                       typeAhead: true,\r
-                                       triggerAction: 'all',\r
-                                       width: 100,\r
-                                       editable: false,\r
-                                       mode: 'local',\r
-                                       displayField: 'desc',\r
-                                       valueField: 'name',\r
-                                       lazyInit: false,\r
-                                       value: 'name',\r
-                                       store: new Ext.data.ArrayStore({\r
-                                               fields: ['name', 'desc'],\r
-                                               data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]\r
-                                           }),\r
-                                           listeners: {\r
-                                                       'select': {fn:this.sortImages, scope:this}\r
-                                           }\r
-                                   }]\r
-                               },{\r
-                                       id: 'img-detail-panel',\r
-                                       region: 'east',\r
-                                       split: true,\r
-                                       width: 150,\r
-                                       minWidth: 150,\r
-                                       maxWidth: 250\r
-                               }],\r
-                               buttons: [{\r
-                                       id: 'ok-btn',\r
-                                       text: 'OK',\r
-                                       handler: this.doCallback,\r
-                                       scope: this\r
-                               },{\r
-                                       text: 'Cancel',\r
-                                       handler: function(){ this.win.hide(); },\r
-                                       scope: this\r
-                               }],\r
-                               keys: {\r
-                                       key: 27, // Esc key\r
-                                       handler: function(){ this.win.hide(); },\r
-                                       scope: this\r
-                               }\r
-                       };\r
-                       Ext.apply(cfg, this.config);\r
-                   this.win = new Ext.Window(cfg);\r
-               }\r
-\r
-               this.reset();\r
-           this.win.show(el);\r
-               this.callback = callback;\r
-               this.animateTarget = el;\r
-       },\r
-\r
-       initTemplates : function(){\r
-               this.thumbTemplate = new Ext.XTemplate(\r
-                       '<tpl for=".">',\r
-                               '<div class="thumb-wrap" id="{name}">',\r
-                               '<div class="thumb"><img src="{url}" title="{name}"></div>',\r
-                               '<span>{shortName}</span></div>',\r
-                       '</tpl>'\r
-               );\r
-               this.thumbTemplate.compile();\r
-\r
-               this.detailsTemplate = new Ext.XTemplate(\r
-                       '<div class="details">',\r
-                               '<tpl for=".">',\r
-                                       '<img src="{url}"><div class="details-info">',\r
-                                       '<b>Image Name:</b>',\r
-                                       '<span>{name}</span>',\r
-                                       '<b>Size:</b>',\r
-                                       '<span>{sizeString}</span>',\r
-                                       '<b>Last Modified:</b>',\r
-                                       '<span>{dateString}</span></div>',\r
-                               '</tpl>',\r
-                       '</div>'\r
-               );\r
-               this.detailsTemplate.compile();\r
-       },\r
-\r
-       showDetails : function(){\r
-           var selNode = this.view.getSelectedNodes();\r
-           var detailEl = Ext.getCmp('img-detail-panel').body;\r
-               if(selNode && selNode.length > 0){\r
-                       selNode = selNode[0];\r
-                       Ext.getCmp('ok-btn').enable();\r
-                   var data = this.lookup[selNode.id];\r
-            detailEl.hide();\r
-            this.detailsTemplate.overwrite(detailEl, data);\r
-            detailEl.slideIn('l', {stopFx:true,duration:.2});\r
-               }else{\r
-                   Ext.getCmp('ok-btn').disable();\r
-                   detailEl.update('');\r
-               }\r
-       },\r
-\r
-       filter : function(){\r
-               var filter = Ext.getCmp('filter');\r
-               this.view.store.filter('name', filter.getValue());\r
-               this.view.select(0);\r
-       },\r
-\r
-       sortImages : function(){\r
-               var v = Ext.getCmp('sortSelect').getValue();\r
-       this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');\r
-       this.view.select(0);\r
-    },\r
-\r
-       reset : function(){\r
-               if(this.win.rendered){\r
-                       Ext.getCmp('filter').reset();\r
-                       this.view.getEl().dom.scrollTop = 0;\r
-               }\r
-           this.view.store.clearFilter();\r
-               this.view.select(0);\r
-       },\r
-\r
-       doCallback : function(){\r
-        var selNode = this.view.getSelectedNodes()[0];\r
-               var callback = this.callback;\r
-               var lookup = this.lookup;\r
-               this.win.hide(this.animateTarget, function(){\r
-            if(selNode && callback){\r
-                               var data = lookup[selNode.id];\r
-                               callback(data);\r
-                       }\r
-               });\r
-    },\r
-\r
-       onLoadException : function(v,o){\r
-           this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');\r
-       }\r
-};\r
-\r
-String.prototype.ellipse = function(maxLength){\r
-    if(this.length > maxLength){\r
-        return this.substr(0, maxLength-3) + '...';\r
-    }\r
-    return this;\r
-};\r
+var ImageChooser = function(config){
+       this.config = config;
+}
+
+ImageChooser.prototype = {
+    // cache data by image name for easy lookup
+    lookup : {},
+
+       show : function(el, callback){
+               if(!this.win){
+                       this.initTemplates();
+
+                       this.store = new Ext.data.JsonStore({
+                           url: this.config.url,
+                           root: 'images',
+                           fields: [
+                               'name', 'url',
+                               {name:'size', type: 'float'},
+                               {name:'lastmod', type:'date', dateFormat:'timestamp'}
+                           ],
+                           listeners: {
+                               'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
+                           }
+                       });
+                       this.store.load();
+
+                       var formatSize = function(data){
+                       if(data.size < 1024) {
+                           return data.size + " bytes";
+                       } else {
+                           return (Math.round(((data.size*10) / 1024))/10) + " KB";
+                       }
+                   };
+
+                       var formatData = function(data){
+                       data.shortName = data.name.ellipse(15);
+                       data.sizeString = formatSize(data);
+                       data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
+                       this.lookup[data.name] = data;
+                       return data;
+                   };
+
+                   this.view = new Ext.DataView({
+                               tpl: this.thumbTemplate,
+                               singleSelect: true,
+                               overClass:'x-view-over',
+                               itemSelector: 'div.thumb-wrap',
+                               emptyText : '<div style="padding:10px;">No images match the specified filter</div>',
+                               store: this.store,
+                               listeners: {
+                                       'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
+                                       'dblclick'       : {fn:this.doCallback, scope:this},
+                                       'loadexception'  : {fn:this.onLoadException, scope:this},
+                                       'beforeselect'   : {fn:function(view){
+                                       return view.store.getRange().length > 0;
+                                   }}
+                               },
+                               prepareData: formatData.createDelegate(this)
+                       });
+
+                       var cfg = {
+                       title: 'Choose an Image',
+                       id: 'img-chooser-dlg',
+                       layout: 'border',
+                               minWidth: 500,
+                               minHeight: 300,
+                               modal: true,
+                               closeAction: 'hide',
+                               border: false,
+                               items:[{
+                                       id: 'img-chooser-view',
+                                       region: 'center',
+                                       autoScroll: true,
+                                       items: this.view,
+                    tbar:[{
+                       text: 'Filter:'
+                    },{
+                       xtype: 'textfield',
+                       id: 'filter',
+                       selectOnFocus: true,
+                       width: 100,
+                       listeners: {
+                               'render': {fn:function(){
+                                                       Ext.getCmp('filter').getEl().on('keyup', function(){
+                                                               this.filter();
+                                                       }, this, {buffer:500});
+                               }, scope:this}
+                       }
+                    }, ' ', '-', {
+                       text: 'Sort By:'
+                    }, {
+                       id: 'sortSelect',
+                       xtype: 'combo',
+                                       typeAhead: true,
+                                       triggerAction: 'all',
+                                       width: 100,
+                                       editable: false,
+                                       mode: 'local',
+                                       displayField: 'desc',
+                                       valueField: 'name',
+                                       lazyInit: false,
+                                       value: 'name',
+                                       store: new Ext.data.ArrayStore({
+                                               fields: ['name', 'desc'],
+                                               data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]
+                                           }),
+                                           listeners: {
+                                                       'select': {fn:this.sortImages, scope:this}
+                                           }
+                                   }]
+                               },{
+                                       id: 'img-detail-panel',
+                                       region: 'east',
+                                       split: true,
+                                       width: 150,
+                                       minWidth: 150,
+                                       maxWidth: 250
+                               }],
+                               buttons: [{
+                                       id: 'ok-btn',
+                                       text: 'OK',
+                                       handler: this.doCallback,
+                                       scope: this
+                               },{
+                                       text: 'Cancel',
+                                       handler: function(){ this.win.hide(); },
+                                       scope: this
+                               }],
+                               keys: {
+                                       key: 27, // Esc key
+                                       handler: function(){ this.win.hide(); },
+                                       scope: this
+                               }
+                       };
+                       Ext.apply(cfg, this.config);
+                   this.win = new Ext.Window(cfg);
+               }
+
+               this.reset();
+           this.win.show(el);
+               this.callback = callback;
+               this.animateTarget = el;
+       },
+
+       initTemplates : function(){
+               this.thumbTemplate = new Ext.XTemplate(
+                       '<tpl for=".">',
+                               '<div class="thumb-wrap" id="{name}">',
+                               '<div class="thumb"><img src="{url}" title="{name}"></div>',
+                               '<span>{shortName}</span></div>',
+                       '</tpl>'
+               );
+               this.thumbTemplate.compile();
+
+               this.detailsTemplate = new Ext.XTemplate(
+                       '<div class="details">',
+                               '<tpl for=".">',
+                                       '<img src="{url}"><div class="details-info">',
+                                       '<b>Image Name:</b>',
+                                       '<span>{name}</span>',
+                                       '<b>Size:</b>',
+                                       '<span>{sizeString}</span>',
+                                       '<b>Last Modified:</b>',
+                                       '<span>{dateString}</span></div>',
+                               '</tpl>',
+                       '</div>'
+               );
+               this.detailsTemplate.compile();
+       },
+
+       showDetails : function(){
+           var selNode = this.view.getSelectedNodes();
+           var detailEl = Ext.getCmp('img-detail-panel').body;
+               if(selNode && selNode.length > 0){
+                       selNode = selNode[0];
+                       Ext.getCmp('ok-btn').enable();
+                   var data = this.lookup[selNode.id];
+            detailEl.hide();
+            this.detailsTemplate.overwrite(detailEl, data);
+            detailEl.slideIn('l', {stopFx:true,duration:.2});
+               }else{
+                   Ext.getCmp('ok-btn').disable();
+                   detailEl.update('');
+               }
+       },
+
+       filter : function(){
+               var filter = Ext.getCmp('filter');
+               this.view.store.filter('name', filter.getValue());
+               this.view.select(0);
+       },
+
+       sortImages : function(){
+               var v = Ext.getCmp('sortSelect').getValue();
+       this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
+       this.view.select(0);
+    },
+
+       reset : function(){
+               if(this.win.rendered){
+                       Ext.getCmp('filter').reset();
+                       this.view.getEl().dom.scrollTop = 0;
+               }
+           this.view.store.clearFilter();
+               this.view.select(0);
+       },
+
+       doCallback : function(){
+        var selNode = this.view.getSelectedNodes()[0];
+               var callback = this.callback;
+               var lookup = this.lookup;
+               this.win.hide(this.animateTarget, function(){
+            if(selNode && callback){
+                               var data = lookup[selNode.id];
+                               callback(data);
+                       }
+               });
+    },
+
+       onLoadException : function(v,o){
+           this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');
+       }
+};
+
+String.prototype.ellipse = function(maxLength){
+    if(this.length > maxLength){
+        return this.substr(0, maxLength-3) + '...';
+    }
+    return this;
+};