Code:
ImageManager = function() {
var layout;
return {
init: function() {
contentLayoutPanel = new Ext.ContentPanel('images', {
title: 'Images in this folder',
closable: false
});
detailsPanel = new Ext.ContentPanel('details', {
title: 'Details',
closable: false
});
layout = new Ext.BorderLayout(document.body, {
north: {
split: false,
initialSize: 32,
titlebar: false
},
east: {
split: true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll: true
},
south: {
split: true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll: true,
closeOnTab: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', detailsPanel);
layout.add('east', new Ext.ContentPanel(Ext.id(), {
autoCreate: true,
title: 'Dynamic Tab',
closable: true
}));
layout.add('east', new Ext.ContentPanel('folderPanel', {
title: 'Folders',
closable: true
}));
layout.add('center', contentLayoutPanel);
layout.add('center', new Ext.ContentPanel('center2', {
title: 'Center Panel',
closable: true
}));
layout.getRegion('center').showPanel('images');
layout.endUpdate();
var bodyEl = contentLayoutPanel.getEl();
//bodyEl.appendChild(this.tb.getEl());
var viewBody = bodyEl.createChild( {
tag: 'div',
cls: 'ychooser-view'
});
contentLayoutPanel.resizeEl = viewBody;
this.detailEl = detailsPanel.getEl();
// create the required templates
this.thumbTemplate = new Ext.Template('<div class="thumb-wrap" id="{name}">' + '<div class="thumb"><img src="{url}" title="{name}"></div>' + '<span>{shortName}</span></div>');
this.thumbTemplate.compile();
this.detailsTemplate = new Ext.Template('<div class="details"><img src="{url}"><div class="details-info">' + '<b>Image Name:</b>' + '<span>{name}</span>' + '<b>Size:</b>' + '<span>{sizeString}</span>' + '<b>Last Modified:</b>' + '<span>{dateString}</span></div></div>');
this.detailsTemplate.compile();
// initialize the View
this.view = new Ext.JsonView(viewBody, this.thumbTemplate, {
singleSelect: true,
jsonRoot: 'images',
emptyText: '<div style="padding:10px;">No images match the specified filter</div>'
});
this.view.on('selectionchange', this.showDetails, this, {buffer:100});
this.view.on('dblclick', this.doCallback, this);
this.view.on('loadexception', this.onLoadException, this);
//this.view.on('beforeselect', function(view){
//return view.getCount() > 0;
//});
this.view.load("TempImages");
}
}
}();
Ext.EventManager.onDocumentReady(ImageManager.init, ImageManager, true);
ImageManager.prototype = {
onLoad : function(){
this.loaded = true;
this.view.select(0);
},
showDetails : function(view, nodes){
alert("hello world!!!!");
},
doCallback : function(){
var selNode = this.view.getSelectedNodes()[0];
var callback = this.callback;
var lookup = this.lookup;
this.dlg.hide(function(){
if(selNode && callback){
var data = lookup[selNode.id];
callback(data);
}
});
}
};
String.prototype.ellipse = function(maxLength){
if(this.length > maxLength){
return this.substr(0, maxLength-3) + '...';
}
return this;
};
The code has had a lot of stuff removed for debugging puroposes, so I'm aware its not pretty! This code will load up the following page just fine: