--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">var ImageChooser = function(config){\r
+ this.config = config;\r
+}\r
+\r
+ImageChooser.prototype = {\r
+ // cache data by image name for easy lookup\r
+ lookup : {},\r
+\r
+ show : function(el, callback){\r
+ if(!this.win){\r
+ this.initTemplates();\r
+\r
+ this.store = new Ext.data.JsonStore({\r
+ url: this.config.url,\r
+ root: 'images',\r
+ fields: [\r
+ 'name', 'url',\r
+ {name:'size', type: 'float'},\r
+ {name:'lastmod', type:'date', dateFormat:'timestamp'}\r
+ ],\r
+ listeners: {\r
+ 'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}\r
+ }\r
+ });\r
+ this.store.load();\r
+\r
+ var formatSize = function(data){\r
+ if(data.size < 1024) {\r
+ return data.size + " bytes";\r
+ } else {\r
+ return (Math.round(((data.size*10) / 1024))/10) + " KB";\r
+ }\r
+ };\r
+\r
+ var formatData = function(data){\r
+ data.shortName = data.name.ellipse(15);\r
+ data.sizeString = formatSize(data);\r
+ data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
+ this.lookup[data.name] = data;\r
+ return data;\r
+ };\r
+\r
+ this.view = new Ext.DataView({\r
+ tpl: this.thumbTemplate,\r
+ singleSelect: true,\r
+ overClass:'x-view-over',\r
+ itemSelector: 'div.thumb-wrap',\r
+ emptyText : '<div style="padding:10px;">No images match the specified filter</div>',\r
+ store: this.store,\r
+ listeners: {\r
+ 'selectionchange': {fn:this.showDetails, scope:this, buffer:100},\r
+ 'dblclick' : {fn:this.doCallback, scope:this},\r
+ 'loadexception' : {fn:this.onLoadException, scope:this},\r
+ 'beforeselect' : {fn:function(view){\r
+ return view.store.getRange().length > 0;\r
+ }}\r
+ },\r
+ prepareData: formatData.createDelegate(this)\r
+ });\r
+\r
+ var cfg = {\r
+ title: 'Choose an Image',\r
+ id: 'img-chooser-dlg',\r
+ layout: 'border',\r
+ minWidth: 500,\r
+ minHeight: 300,\r
+ modal: true,\r
+ closeAction: 'hide',\r
+ border: false,\r
+ items:[{\r
+ id: 'img-chooser-view',\r
+ region: 'center',\r
+ autoScroll: true,\r
+ items: this.view,\r
+ tbar:[{\r
+ text: 'Filter:'\r
+ },{\r
+ xtype: 'textfield',\r
+ id: 'filter',\r
+ selectOnFocus: true,\r
+ width: 100,\r
+ listeners: {\r
+ 'render': {fn:function(){\r
+ Ext.getCmp('filter').getEl().on('keyup', function(){\r
+ this.filter();\r
+ }, this, {buffer:500});\r
+ }, scope:this}\r
+ }\r
+ }, ' ', '-', {\r
+ text: 'Sort By:'\r
+ }, {\r
+ id: 'sortSelect',\r
+ xtype: 'combo',\r
+ typeAhead: true,\r
+ triggerAction: 'all',\r
+ width: 100,\r
+ editable: false,\r
+ mode: 'local',\r
+ displayField: 'desc',\r
+ valueField: 'name',\r
+ lazyInit: false,\r
+ value: 'name',\r
+ store: new Ext.data.ArrayStore({\r
+ fields: ['name', 'desc'],\r
+ data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]\r
+ }),\r
+ listeners: {\r
+ 'select': {fn:this.sortImages, scope:this}\r
+ }\r
+ }]\r
+ },{\r
+ id: 'img-detail-panel',\r
+ region: 'east',\r
+ split: true,\r
+ width: 150,\r
+ minWidth: 150,\r
+ maxWidth: 250\r
+ }],\r
+ buttons: [{\r
+ id: 'ok-btn',\r
+ text: 'OK',\r
+ handler: this.doCallback,\r
+ scope: this\r
+ },{\r
+ text: 'Cancel',\r
+ handler: function(){ this.win.hide(); },\r
+ scope: this\r
+ }],\r
+ keys: {\r
+ key: 27, // Esc key\r
+ handler: function(){ this.win.hide(); },\r
+ scope: this\r
+ }\r
+ };\r
+ Ext.apply(cfg, this.config);\r
+ this.win = new Ext.Window(cfg);\r
+ }\r
+\r
+ this.reset();\r
+ this.win.show(el);\r
+ this.callback = callback;\r
+ this.animateTarget = el;\r
+ },\r
+\r
+ initTemplates : function(){\r
+ this.thumbTemplate = new Ext.XTemplate(\r
+ '<tpl for=".">',\r
+ '<div class="thumb-wrap" id="{name}">',\r
+ '<div class="thumb"><img src="{url}" title="{name}"></div>',\r
+ '<span>{shortName}</span></div>',\r
+ '</tpl>'\r
+ );\r
+ this.thumbTemplate.compile();\r
+\r
+ this.detailsTemplate = new Ext.XTemplate(\r
+ '<div class="details">',\r
+ '<tpl for=".">',\r
+ '<img src="{url}"><div class="details-info">',\r
+ '<b>Image Name:</b>',\r
+ '<span>{name}</span>',\r
+ '<b>Size:</b>',\r
+ '<span>{sizeString}</span>',\r
+ '<b>Last Modified:</b>',\r
+ '<span>{dateString}</span></div>',\r
+ '</tpl>',\r
+ '</div>'\r
+ );\r
+ this.detailsTemplate.compile();\r
+ },\r
+\r
+ showDetails : function(){\r
+ var selNode = this.view.getSelectedNodes();\r
+ var detailEl = Ext.getCmp('img-detail-panel').body;\r
+ if(selNode && selNode.length > 0){\r
+ selNode = selNode[0];\r
+ Ext.getCmp('ok-btn').enable();\r
+ var data = this.lookup[selNode.id];\r
+ detailEl.hide();\r
+ this.detailsTemplate.overwrite(detailEl, data);\r
+ detailEl.slideIn('l', {stopFx:true,duration:.2});\r
+ }else{\r
+ Ext.getCmp('ok-btn').disable();\r
+ detailEl.update('');\r
+ }\r
+ },\r
+\r
+ filter : function(){\r
+ var filter = Ext.getCmp('filter');\r
+ this.view.store.filter('name', filter.getValue());\r
+ this.view.select(0);\r
+ },\r
+\r
+ sortImages : function(){\r
+ var v = Ext.getCmp('sortSelect').getValue();\r
+ this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');\r
+ this.view.select(0);\r
+ },\r
+\r
+ reset : function(){\r
+ if(this.win.rendered){\r
+ Ext.getCmp('filter').reset();\r
+ this.view.getEl().dom.scrollTop = 0;\r
+ }\r
+ this.view.store.clearFilter();\r
+ this.view.select(0);\r
+ },\r
+\r
+ doCallback : function(){\r
+ var selNode = this.view.getSelectedNodes()[0];\r
+ var callback = this.callback;\r
+ var lookup = this.lookup;\r
+ this.win.hide(this.animateTarget, function(){\r
+ if(selNode && callback){\r
+ var data = lookup[selNode.id];\r
+ callback(data);\r
+ }\r
+ });\r
+ },\r
+\r
+ onLoadException : function(v,o){\r
+ this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');\r
+ }\r
+};\r
+\r
+String.prototype.ellipse = function(maxLength){\r
+ if(this.length > maxLength){\r
+ return this.substr(0, maxLength-3) + '...';\r
+ }\r
+ return this;\r
+};\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff