Hi,

I'm in the process of playing around with Ext JS but am having a bit of a problem with an error message which keeps popping up. The code I am using is thus:

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:



The problem begins when I click on one of the thumbnail images, Firebug will then pop up with the error "fn has no properties". I've managed to deduce from other posts in this forum that this could be down to the function I am passing being invalid, this is further confirmed by the fact that if I change the following line:

Code:
this.view.on('selectionchange', this.showDetails, this, {buffer:100});
to:

Code:
this.view.on('selectionchange', function(){alert("Hello World!")}, this, {buffer:100});
it will work and an alert box will be displayed.

I'd appreciate it if someone could point out what I'm missing here!!