chooser.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:6k
源码类别:

中间件编程

开发平台:

JavaScript

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