git.roojs.org Git - roojs1/blob - examples/grid/viewpanel.js

   1
   2 var ImageChooser = function(config){
   3     // create the dialog from scratch
   4     var dlg = new Roo.LayoutDialog(config.id || Roo.id(), {
   5                 autoCreate : true,
   6                 minWidth:400,
   7                 minHeight:300,
   8                 syncHeightBeforeShow: true,
   9                 shadow:true,
  10         fixedcenter:true,
  11         center:{autoScroll:false},
  12                 east:{split:true,initialSize:150,minSize:150,maxSize:250}
  13         });
  14         dlg.setTitle('Choose an Image');
  15         dlg.getEl().addClass('ychooser-dlg');
  16         dlg.addKeyListener(27, dlg.hide, dlg);
  17
  18     // add some buttons
  19     this.ok = dlg.addButton('OK', this.doCallback, this);
  20     this.ok.disable();
  21     dlg.setDefaultButton(dlg.addButton('Cancel', dlg.hide, dlg));
  22     dlg.on('show', this.load, this);
  23         this.dlg = dlg;
  24         var layout = dlg.getLayout();
  25
  26         // filter/sorting toolbar
  27         this.tb = new Roo.Toolbar(this.dlg.body.createChild({tag:'div'}));
  28         this.sortSelect = Roo.DomHelper.append(this.dlg.body.dom, {
  29                 tag:'select', children: [
  30                         {tag: 'option', value:'name', selected: 'true', html:'Name'},
  31                         {tag: 'option', value:'size', html:'File Size'},
  32                         {tag: 'option', value:'lastmod', html:'Last Modified'}
  33                 ]
  34         }, true);
  35         this.sortSelect.on('change', this.sortImages, this, true);
  36
  37         this.txtFilter = Roo.DomHelper.append(this.dlg.body.dom, {
  38                 tag:'input', type:'text', size:'12'}, true);
  39
  40         this.txtFilter.on('focus', function(){this.dom.select();});
  41         this.txtFilter.on('keyup', this.filter, this, {buffer:500});
  42
  43         this.tb.add('Filter:', this.txtFilter.dom, 'separator', 'Sort By:', this.sortSelect.dom);
  44
  45         // add the panels to the layout
  46         layout.beginUpdate();
  47         var vp = layout.add('center', new Roo.ContentPanel(Roo.id(), {
  48                 autoCreate : true,
  49                 toolbar: this.tb,
  50                 fitToFrame:true
  51         }));
  52         var dp = layout.add('east', new Roo.ContentPanel(Roo.id(), {
  53                 autoCreate : true,
  54                 fitToFrame:true
  55         }));
  56     layout.endUpdate();
  57
  58         var bodyEl = vp.getEl();
  59         bodyEl.appendChild(this.tb.getEl());
  60         var viewBody = bodyEl.createChild({tag:'div', cls:'ychooser-view'});
  61         vp.resizeEl = viewBody;
  62
  63         this.detailEl = dp.getEl();
  64
  65         // create the required templates
  66         this.thumbTemplate = new Roo.Template(
  67                 '<div class="thumb-wrap" id="{name}">' +
  68                 '<div class="thumb"><img src="{url}" title="{name}"></div>' +
  69                 '<span>{shortName}</span></div>'
  70         );
  71         this.thumbTemplate.compile();
  72
  73         this.detailsTemplate = new Roo.Template(
  74                 '<div class="details"><img src="{url}"><div class="details-info">' +
  75                 '<b>Image Name:</b>' +
  76                 '<span>{name}</span>' +
  77                 '<b>Size:</b>' +
  78                 '<span>{sizeString}</span>' +
  79                 '<b>Last Modified:</b>' +
  80                 '<span>{dateString}</span></div></div>'
  81         );
  82         this.detailsTemplate.compile();
  83
  84     // initialize the View
  85         this.view = new Roo.JsonView(viewBody, this.thumbTemplate, {
  86                 singleSelect: true,
  87                 jsonRoot: 'images',
  88                 emptyText : '<div style="padding:10px;">No images match the specified filter</div>'
  89         });
  90     this.view.on('selectionchange', this.showDetails, this, {buffer:100});
  91     this.view.on('dblclick', this.doCallback, this);
  92     this.view.on('loadexception', this.onLoadException, this);
  93     this.view.on('beforeselect', function(view){
  94         return view.getCount() > 0;
  95     });
  96     Roo.apply(this, config, {
  97         width: 540, height: 400
  98     });
  99
 100     var formatSize = function(size){
 101         if(size < 1024) {
 102             return size + " bytes";
 103         } else {
 104             return (Math.round(((size*10) / 1024))/10) + " KB";
 105         }
 106     };
 107
 108     // cache data by image name for easy lookup
 109     var lookup = {};
 110     // make some values pretty for display
 111     this.view.prepareData = function(data){
 112         data.shortName = data.name.ellipse(15);
 113         data.sizeString = formatSize(data.size);
 114         data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
 115         lookup[data.name] = data;
 116         return data;
 117     };
 118     this.lookup = lookup;
 119
 120         dlg.resizeTo(this.width, this.height);
 121         this.loaded = false;
 122 };
 123 ImageChooser.prototype = {
 124         show : function(el, callback){
 125             this.reset();
 126             this.dlg.show(el);
 127                 this.callback = callback;
 128         },
 129
 130         reset : function(){
 131             this.view.getEl().dom.scrollTop = 0;
 132             this.view.clearFilter();
 133                 this.txtFilter.dom.value = '';
 134                 this.view.select(0);
 135         },
 136
 137         load : function(){
 138                 if(!this.loaded){
 139                         this.view.load({url: this.url, params:this.params, callback:this.onLoad.createDelegate(this)});
 140                 }
 141         },
 142
 143         onLoadException : function(v,o){
 144             this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');
 145         },
 146
 147         filter : function(){
 148                 var filter = this.txtFilter.dom.value;
 149                 this.view.filter('name', filter);
 150                 this.view.select(0);
 151         },
 152
 153         onLoad : function(){
 154                 this.loaded = true;
 155                 this.view.select(0);
 156         },
 157
 158         sortImages : function(){
 159                 var p = this.sortSelect.dom.value;
 160         this.view.sort(p, p != 'name' ? 'desc' : 'asc');
 161         this.view.select(0);
 162     },
 163
 164         showDetails : function(view, nodes){
 165             var selNode = nodes[0];
 166                 if(selNode && this.view.getCount() > 0){
 167                         this.ok.enable();
 168                     var data = this.lookup[selNode.id];
 169             this.detailEl.hide();
 170             this.detailsTemplate.overwrite(this.detailEl, data);
 171             this.detailEl.slideIn('l', {stopFx:true,duration:.2});
 172
 173                 }else{
 174                     this.ok.disable();
 175                     this.detailEl.update('');
 176                 }
 177         },
 178
 179         doCallback : function(){
 180         var selNode = this.view.getSelectedNodes()[0];
 181                 var callback = this.callback;
 182                 var lookup = this.lookup;
 183                 this.dlg.hide(function(){
 184             if(selNode && callback){
 185                                 var data = lookup[selNode.id];
 186                                 callback(data);
 187                         }
 188                 });
 189         }
 190 };
 191
 192 String.prototype.ellipse = function(maxLength){
 193     if(this.length > maxLength){
 194         return this.substr(0, maxLength-3) + '...';
 195     }
 196     return this;
 197 };