fn has no properties

[Tim Siney]

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:

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:

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

to:

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!!

[jsakalos]

I guess that the function is not defined yet at the time you install the event handler.

[Animal]

Yes, "this" is the object that you return from the function and put into ImageManager.

It contains init, detailEl, thumbTemplate, detailsTemplate, and view.

It cannot have a prototype, it is an object, the result of a function call!

...
    }
}();
Ext.EventManager.onDocumentReady(ImageManager.init, ImageManager, true);

ImageManager.prototype = {
...

[Tim Siney]

Thanks for your reply. In case this is of use to anyone else, I managed to get this to work by creating a standard javascript function such as:

function testing123(){
alert("hello world");
}

and calling it from the selectionchange event thus:

this.view.on('selectionchange', testing123, this, {buffer:100});