examples/view/chooser.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /*\r
  10  * Ext JS Library 2.0\r
  11  * Copyright(c) 2006-2007, Ext JS, LLC.\r
  12  * licensing@extjs.com\r
  13  * \r
  14  * http://extjs.com/license\r
  15  */\r
  16  \r
  17 var ImageChooser = function(config){\r
  18         this.config = config;\r
  19 }\r
  20 \r
  21 ImageChooser.prototype = {\r
  22     // cache data by image name for easy lookup\r
  23     lookup : {},\r
  24     \r
  25         show : function(el, callback){\r
  26                 if(!this.win){\r
  27                         this.initTemplates();\r
  28                         \r
  29                         this.store = new Ext.data.JsonStore({\r
  30                             url: this.config.url,\r
  31                             root: 'images',\r
  32                             fields: [\r
  33                                 'name', 'url',\r
  34                                 {name:'size', type: 'float'},\r
  35                                 {name:'lastmod', type:'date', dateFormat:'timestamp'}\r
  36                             ],\r
  37                             listeners: {\r
  38                                 'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}\r
  39                             }\r
  40                         });\r
  41                         this.store.load();\r
  42                         \r
  43                         var formatSize = function(data){\r
  44                         if(data.size < 1024) {\r
  45                             return data.size + " bytes";\r
  46                         } else {\r
  47                             return (Math.round(((data.size*10) / 1024))/10) + " KB";\r
  48                         }\r
  49                     };\r
  50                         \r
  51                         var formatData = function(data){\r
  52                         data.shortName = data.name.ellipse(15);\r
  53                         data.sizeString = formatSize(data);\r
  54                         data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
  55                         this.lookup[data.name] = data;\r
  56                         return data;\r
  57                     };\r
  58                         \r
  59                     this.view = new Ext.DataView({\r
  60                                 tpl: this.thumbTemplate,\r
  61                                 singleSelect: true,\r
  62                                 overClass:'x-view-over',\r
  63                                 itemSelector: 'div.thumb-wrap',\r
  64                                 emptyText : '<div style="padding:10px;">No images match the specified filter</div>',\r
  65                                 store: this.store,\r
  66                                 listeners: {\r
  67                                         'selectionchange': {fn:this.showDetails, scope:this, buffer:100},\r
  68                                         'dblclick'       : {fn:this.doCallback, scope:this},\r
  69                                         'loadexception'  : {fn:this.onLoadException, scope:this},\r
  70                                         'beforeselect'   : {fn:function(view){\r
  71                                         return view.store.getRange().length > 0;\r
  72                                     }}\r
  73                                 },\r
  74                                 prepareData: formatData.createDelegate(this)\r
  75                         });\r
  76                     \r
  77                         var cfg = {\r
  78                         title: 'Choose an Image',\r
  79                         id: 'img-chooser-dlg',\r
  80                         layout: 'border',\r
  81                                 minWidth: 500,\r
  82                                 minHeight: 300,\r
  83                                 modal: true,\r
  84                                 closeAction: 'hide',\r
  85                                 border: false,\r
  86                                 items:[{\r
  87                                         id: 'img-chooser-view',\r
  88                                         region: 'center',\r
  89                                         autoScroll: true,\r
  90                                         items: this.view,\r
  91                     tbar:[{\r
  92                         text: 'Filter:'\r
  93                     },{\r
  94                         xtype: 'textfield',\r
  95                         id: 'filter',\r
  96                         selectOnFocus: true,\r
  97                         width: 100,\r
  98                         listeners: {\r
  99                                 'render': {fn:function(){\r
 100                                                         Ext.getCmp('filter').getEl().on('keyup', function(){\r
 101                                                                 this.filter();\r
 102                                                         }, this, {buffer:500});\r
 103                                 }, scope:this}\r
 104                         }\r
 105                     }, ' ', '-', {\r
 106                         text: 'Sort By:'\r
 107                     }, {\r
 108                         id: 'sortSelect',\r
 109                         xtype: 'combo',\r
 110                                         typeAhead: true,\r
 111                                         triggerAction: 'all',\r
 112                                         width: 100,\r
 113                                         editable: false,\r
 114                                         mode: 'local',\r
 115                                         displayField: 'desc',\r
 116                                         valueField: 'name',\r
 117                                         lazyInit: false,\r
 118                                         value: 'name',\r
 119                                         store: new Ext.data.SimpleStore({\r
 120                                                 fields: ['name', 'desc'],\r
 121                                                 data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]\r
 122                                             }),\r
 123                                             listeners: {\r
 124                                                         'select': {fn:this.sortImages, scope:this}\r
 125                                             }\r
 126                                     }]\r
 127                                 },{\r
 128                                         id: 'img-detail-panel',\r
 129                                         region: 'east',\r
 130                                         split: true,\r
 131                                         width: 150,\r
 132                                         minWidth: 150,\r
 133                                         maxWidth: 250\r
 134                                 }],\r
 135                                 buttons: [{\r
 136                                         id: 'ok-btn',\r
 137                                         text: 'OK',\r
 138                                         handler: this.doCallback,\r
 139                                         scope: this\r
 140                                 },{\r
 141                                         text: 'Cancel',\r
 142                                         handler: function(){ this.win.hide(); },\r
 143                                         scope: this\r
 144                                 }],\r
 145                                 keys: {\r
 146                                         key: 27, // Esc key\r
 147                                         handler: function(){ this.win.hide(); },\r
 148                                         scope: this\r
 149                                 }\r
 150                         };\r
 151                         Ext.apply(cfg, this.config);\r
 152                     this.win = new Ext.Window(cfg);\r
 153                 }\r
 154                 \r
 155                 this.reset();\r
 156             this.win.show(el);\r
 157                 this.callback = callback;\r
 158                 this.animateTarget = el;\r
 159         },\r
 160         \r
 161         initTemplates : function(){\r
 162                 this.thumbTemplate = new Ext.XTemplate(\r
 163                         '<tpl for=".">',\r
 164                                 '<div class="thumb-wrap" id="{name}">',\r
 165                                 '<div class="thumb"><img src="{url}" title="{name}"></div>',\r
 166                                 '<span>{shortName}</span></div>',\r
 167                         '</tpl>'\r
 168                 );\r
 169                 this.thumbTemplate.compile();\r
 170                 \r
 171                 this.detailsTemplate = new Ext.XTemplate(\r
 172                         '<div class="details">',\r
 173                                 '<tpl for=".">',\r
 174                                         '<img src="{url}"><div class="details-info">',\r
 175                                         '<b>Image Name:</b>',\r
 176                                         '<span>{name}</span>',\r
 177                                         '<b>Size:</b>',\r
 178                                         '<span>{sizeString}</span>',\r
 179                                         '<b>Last Modified:</b>',\r
 180                                         '<span>{dateString}</span></div>',\r
 181                                 '</tpl>',\r
 182                         '</div>'\r
 183                 );\r
 184                 this.detailsTemplate.compile();\r
 185         },\r
 186         \r
 187         showDetails : function(){\r
 188             var selNode = this.view.getSelectedNodes();\r
 189             var detailEl = Ext.getCmp('img-detail-panel').body;\r
 190                 if(selNode && selNode.length > 0){\r
 191                         selNode = selNode[0];\r
 192                         Ext.getCmp('ok-btn').enable();\r
 193                     var data = this.lookup[selNode.id];\r
 194             detailEl.hide();\r
 195             this.detailsTemplate.overwrite(detailEl, data);\r
 196             detailEl.slideIn('l', {stopFx:true,duration:.2});\r
 197                 }else{\r
 198                     Ext.getCmp('ok-btn').disable();\r
 199                     detailEl.update('');\r
 200                 }\r
 201         },\r
 202         \r
 203         filter : function(){\r
 204                 var filter = Ext.getCmp('filter');\r
 205                 this.view.store.filter('name', filter.getValue());\r
 206                 this.view.select(0);\r
 207         },\r
 208         \r
 209         sortImages : function(){\r
 210                 var v = Ext.getCmp('sortSelect').getValue();\r
 211         this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');\r
 212         this.view.select(0);\r
 213     },\r
 214         \r
 215         reset : function(){\r
 216                 if(this.win.rendered){\r
 217                         Ext.getCmp('filter').reset();\r
 218                         this.view.getEl().dom.scrollTop = 0;\r
 219                 }\r
 220             this.view.store.clearFilter();\r
 221                 this.view.select(0);\r
 222         },\r
 223         \r
 224         doCallback : function(){\r
 225         var selNode = this.view.getSelectedNodes()[0];\r
 226                 var callback = this.callback;\r
 227                 var lookup = this.lookup;\r
 228                 this.win.hide(this.animateTarget, function(){\r
 229             if(selNode && callback){\r
 230                                 var data = lookup[selNode.id];\r
 231                                 callback(data);\r
 232                         }\r
 233                 });\r
 234     },\r
 235         \r
 236         onLoadException : function(v,o){\r
 237             this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>'); \r
 238         }\r
 239 };\r
 240 \r
 241 String.prototype.ellipse = function(maxLength){\r
 242     if(this.length > maxLength){\r
 243         return this.substr(0, maxLength-3) + '...';\r
 244     }\r
 245     return this;\r
 246 };\r