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