PDA

View Full Version : Panel extension - unable to add - Unable to get value of the property 'bodyresize'



chrismayhew
3 May 2012, 2:42 PM
Hi,

I am struggling, and not sure what I have not done. I have extended the Panel to allow me to display a number of label images (BoxComponent). I created a working version without extension, but I wanted to be able to reuse this so I begin doing my first extension with ExtJs (3.21).

Basic concept is a label panel which extends Ext.Panel. This is called and makes an ajax call to identify labels (BoxComponent) to be displayed. When I try to add to the main panel I am getting the following error:
Unable to get value of the property 'bodyresize': object is null or undefined
I've tried a number of things, but with no luck. I've attached the code to see if anyone can correct my misunderstanding.


var labelPanel = new myApp.LabelPanel({
title: 'Label Panel',
renderTo: 'label-panel',
layout: 'auto',
hidden: false
});

/*called like this, with callback to displayLabels*/

labelPanel.populateLabels(labelid, labelPanel.displayLabels);

/***Then extension as follows***/
Ext.namespace('myApp');
myApp.LabelPanel = Ext.extend(Ext.Panel,
(function() {

//Private to Build an Ext BoxComponent using the label image
var labelBoxExt = function(labelId, selected) {
var label;
if ( selected ) {
label = new Ext.BoxComponent(
{
autoEl: {
tag: 'img',
src: 'images/labels/label-' + labelId + '.png',
height: 50,
width: 50
}
}
);
} else {
label = new Ext.BoxComponent(
{
autoEl: {
tag: 'img',
src: 'images/labels/label-none.png',
height: 50,
width: 50
}
}
);
}
return label;
};
return {

initComponent: function() {
Ext.apply(this, {
width: 55,
height: 500
});
myApp.LabelPanel.superclass.initComponent.apply(this, arguments);
this.on('click', function() {alert("You Clicked " + this.title);}, this);
},

/** Retrieve labels and their selection state*/
populateLabels: function(labelCatId, callback) {
var labelComponents = new Array();
Ext.Ajax.request(
{
url: 'getlabels.json',
method: 'GET',
params: {
labelCatId: labelCatId
},
success: function(result, request) {
var response = eval('(' + result.responseText + ')');
if (response.success) {
var labels = response.result;
for( var i=0; i < labels.length; i++) {
var label = labels[i];
labelComponent = labelBoxExt(label.id, label.selected );
labelComponents.push(labelComponent);
}
callback(labelComponents);
}
},
failure: function(result, request) {
alert("Failure");
}
});

},
/* Add labels to the panel
* Update layout as page has already been rendered
*/
displayLabels: function(labels) {
//Clear out the panel of all existing labels - Following line also gives similar error
myApp.LabelPanel.superclass.removeAll();

if ( labels != null && labels.length > 0 ) {
for( var i = 0; i < labels.length; i++) {
//myApp.LabelPanel.superclass.add(labels[i]);
}
}

//alternatively should be able to load whole array all at once
//myApp.LabelPanel.superclass.add(labels);

myApp.LabelPanel.superclass.doLayout();

/* Tried this manually to see if this was the problem - same result
mynewbox = new Ext.BoxComponent(
{
autoEl: {
tag: 'img',
src: 'images/labels/label-2.png',
height: 50,
width: 50
}
}
)
myApp.LabelPanel.superclass.add(mynewbox);
myApp.LabelPanel.superclass.doLayout(mynewbox);
*/
}
};
}())
);


I have tried to remove some of the detail, but hopefully there is something missing in my understanding!

Thanks
Chris

scottmartin
14 May 2012, 6:52 AM
Have you traced though your code with FB/DevTools to see what is not initialized?

Regards,
Scott.

chrismayhew
14 May 2012, 7:15 AM
Hi Scott,
Thanks for the reply. I have resolved this now. It turned out to be a scoping issue. I passed the scope into the displaylabels function and this fixed it.

Regards
Chris

scottmartin
14 May 2012, 7:17 AM
Thank you for the update.

Scott.