2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * Ext JS Library 2.0
\r
11 * Copyright(c) 2006-2007, Ext JS, LLC.
\r
12 * licensing@extjs.com
\r
14 * http://extjs.com/license
\r
17 var ImageChooser = function(config){
\r
18 this.config = config;
\r
21 ImageChooser.prototype = {
\r
22 // cache data by image name for easy lookup
\r
25 show : function(el, callback){
\r
27 this.initTemplates();
\r
29 this.store = new Ext.data.JsonStore({
\r
30 url: this.config.url,
\r
34 {name:'size', type: 'float'},
\r
35 {name:'lastmod', type:'date', dateFormat:'timestamp'}
\r
38 'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
\r
43 var formatSize = function(data){
\r
44 if(data.size < 1024) {
\r
45 return data.size + " bytes";
\r
47 return (Math.round(((data.size*10) / 1024))/10) + " KB";
\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
59 this.view = new Ext.DataView({
\r
60 tpl: this.thumbTemplate,
\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
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
74 prepareData: formatData.createDelegate(this)
\r
78 title: 'Choose an Image',
\r
79 id: 'img-chooser-dlg',
\r
84 closeAction: 'hide',
\r
87 id: 'img-chooser-view',
\r
96 selectOnFocus: true,
\r
99 'render': {fn:function(){
\r
100 Ext.getCmp('filter').getEl().on('keyup', function(){
\r
102 }, this, {buffer:500});
\r
111 triggerAction: 'all',
\r
115 displayField: 'desc',
\r
116 valueField: '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
124 'select': {fn:this.sortImages, scope:this}
\r
128 id: 'img-detail-panel',
\r
138 handler: this.doCallback,
\r
142 handler: function(){ this.win.hide(); },
\r
146 key: 27, // Esc key
\r
147 handler: function(){ this.win.hide(); },
\r
151 Ext.apply(cfg, this.config);
\r
152 this.win = new Ext.Window(cfg);
\r
157 this.callback = callback;
\r
158 this.animateTarget = el;
\r
161 initTemplates : function(){
\r
162 this.thumbTemplate = new Ext.XTemplate(
\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
169 this.thumbTemplate.compile();
\r
171 this.detailsTemplate = new Ext.XTemplate(
\r
172 '<div class="details">',
\r
174 '<img src="{url}"><div class="details-info">',
\r
175 '<b>Image Name:</b>',
\r
176 '<span>{name}</span>',
\r
178 '<span>{sizeString}</span>',
\r
179 '<b>Last Modified:</b>',
\r
180 '<span>{dateString}</span></div>',
\r
184 this.detailsTemplate.compile();
\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
195 this.detailsTemplate.overwrite(detailEl, data);
\r
196 detailEl.slideIn('l', {stopFx:true,duration:.2});
\r
198 Ext.getCmp('ok-btn').disable();
\r
199 detailEl.update('');
\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
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
215 reset : function(){
\r
216 if(this.win.rendered){
\r
217 Ext.getCmp('filter').reset();
\r
218 this.view.getEl().dom.scrollTop = 0;
\r
220 this.view.store.clearFilter();
\r
221 this.view.select(0);
\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
236 onLoadException : function(v,o){
\r
237 this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');
\r
241 String.prototype.ellipse = function(maxLength){
\r
242 if(this.length > maxLength){
\r
243 return this.substr(0, maxLength-3) + '...';
\r