PDA

View Full Version : preconfigured classes help!!!



haleboppp
23 Apr 2008, 9:12 AM
hi there
can i use a preconfigured and registered class inside another preconfigured and registered class??? this seems and fool (and maybe annoying) question but i have this scenario and if i replace:


new Ext.Panel ({
renderTo: Ext.getBody(),
items: [myForm]
});

with


new Ext.Panel ({
renderTo: Ext.getBody(),
items: [{xtype: 'secsform'}]
});


i get an error using the following definition:


ExtApp.Forms.FSections = Ext.extend(Ext.form.FormPanel, {
labelWidth: 125, // label settings here cascade unless overridden
frame:true,
title: 'Sections Panel test',
bodyStyle:'padding:5px 5px 0;background-color: white',
width: 350,
defaults: {width: 230},
/*
items: [
{xtype:'combosec', fieldLabel:'Combo Sections', name:'fromComboSecs'}
],
*/
items: [myCombo],

initComponent: function () {
Ext.apply (this, { });

ExtApp.Forms.FSections.superclass.initComponent.apply (this, arguments);
},

onRender: function () {
ExtApp.Forms.FSections.superclass.onRender.apply (this, arguments);
}
});
Ext.reg('secsform', ExtApp.Forms.FSections);


im trying to debug but im running out of memory and processing power... :s

any suggestion is very welcome!!!
zanx in advance

w i l l y

mjlecomte
23 Apr 2008, 12:06 PM
"an error" is pretty vague isn't it?

haleboppp
24 Apr 2008, 12:56 AM
"an error" is pretty vague isn't it?

well, sorry, i didnt wanna paste the call stack because i though my question was clear enough (whether or not i can "nest" preconfigured classes... and i suppossed so...).

the call stack is as follows


this.items.add is not a function
add(Object initialConfig=Object editable=false mode=remote)ext-all-debug.js (line 13888)
initComponent()ext-all-debug.js (line 13820)
initComponent()ext-all-debug.js (line 15578)
initComponent()ext-all-debug.js (line 27827)
initComponent()testpage.js (line 39)
Component(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 12165)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
create(Object xtype=secsform title=Alternative title, "panel")ext-all-debug.js (line 12106)
createComponent(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13979)
lookupComponent(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13973)
add(Object xtype=secsform title=Alternative title)ext-all-debug.js (line 13885)
initComponent()ext-all-debug.js (line 13820)
initComponent()ext-all-debug.js (line 15578)
Component(Object renderTo=Object items=[1])ext-all-debug.js (line 12165)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
constructor()ext-base-debug.js (line 79)
innerInit()testpage.js (line 72)
fire()ext-all-debug.js (line 1505)
fireDocReady()ext-all-debug.js (line 1542)
[Break on this error] this.items.add(c);

where innerInit() is the only method i wrote from those appearing in the call stack:


theApp = function () {
var onePanel;

function innerInit () {
Ext.QuickTips.init();

onePanel = new Ext.Panel ({
renderTo: Ext.getBody(),
items: [{xtype: 'secsform', title:'Alternative title'}]
// items: [myForm] // it works!!
});

onePanel.render();
};

return {
init: innerInit,
panel: onePanel
}
}

var test = new theApp ();
Ext.onReady (test.init, test);


it seems it dont recognize the xtype or something (i dont know exactly how lazy rendering works). As i told in the first post, changing the preconfigured class for a instance with the same config options works. I can use the last approach (using objects) but i wanted to use lazy rendering coz is recommended and finer (better application structure).

i will continue debugging the stuff and changing zings for a while before giving it up, but any hint will be welcome.

zanx in advance and sorry for inconveniences

w i l l y

ps: the code is the same as the first post

haleboppp
24 Apr 2008, 2:16 AM
Well, i found out it is better not to include the items config option as normal config options in preconfigured classes, only simple values seem to work ok. But it is possible to include them in the initComponent() method... so, i imagine that is in that method where the items are added to the containers, arent they?

cheers people

w i l l y

mjlecomte
24 Apr 2008, 5:45 AM
Well, i found out it is better not to include the items config option as normal config options in preconfigured classes, only simple values seem to work ok. But it is possible to include them in the initComponent() method... so, i imagine that is in that method where the items are added to the containers, arent they?

cheers people

w i l l y
There are several examples of using xtypes with other configs, unless I missed your point.

I was going to suggest you compare the stacks to see if you could figure something out:


function innerInit () {
Ext.QuickTips.init();

onePanel = new Ext.Panel ({
renderTo: Ext.getBody(),
// items: [{xtype: 'secsform', title:'Alternative title'}]
items: [myForm] // it works!!
});
console.trace();

onePanel2 = new Ext.Panel ({
renderTo: Ext.getBody(),
items: [{xtype: 'secsform', title:'Alternative title'}]
// items: [myForm] // it works!!
});
console.trace();

haleboppp
25 Apr 2008, 12:34 AM
I was going to suggest you compare the stacks to see if you could figure something out:


console.trace();

onePanel2 = new Ext.Panel ({
renderTo: Ext.getBody(),
items: [{xtype: 'secsform', title:'Alternative title'}]
// items: [myForm] // it works!!
});
console.trace();


zanx!!!
i dont use the console object so much because i don use firebug. now im using firefox 3b5 because of memory leaks problems with firefox 2 and there isnt firebug for this browser and i use a combination of error console and venkman debugger... besides, the javascript stack trace is a bit messy (im used to see java exceptions, which use to be more informative).

on the other hand, the hint for comparison is welcome for future issues, zanx again... and, talkin' about that, do you know where event listeners has to be in preconfigured classes? i am trying to follow this skeleton:


MyScope = Ext.extend(Ext.form.ComboBox, {
// configurables
// anything what is here can be configured from outside
border:false

// {{{
,initComponent:function() {
// {{{
Ext.apply(this, {
// anything here, e.g. items, tools or buttons arrays,
// cannot be changed from outside
}); // e/o apply
// }}}

// call parent
MyScope.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // e/o function initComponent
// }}}
// {{{
,onRender:function() {

// before parent code

// call parent
MyScope.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // e/o function onRender
// }}}

// any other added/overrided methods

}); // e/o extend

// register xtype
Ext.reg('mycomponentxtype', MyScope);


and i trying to use in:


initComponent: function () {
Ext.apply (this, {
items: [
{xtype: 'x-combosec'},
{xtype: 'button', text: 'New...',
listeners: [
{click: function (btn, ev) {
Ext.Msg.alert ('button '+btn.text+' clicked');
}
}
]}
],

buttons: [
{
text: 'New...',
listeners:[
{click: function (btn, ev) {
Ext.Msg.alert ('button '+btn.text+' clicked');
}
}]
}] // end buttons
});

ExtApp.Forms.FSections.superclass.initComponent.apply (this, arguments);
},


but it doesnt work and i dont get any error. this is a kind of clumsiness from my own, but what is wrong?

zanx again

w i l l y

iliab
25 Apr 2008, 1:56 PM
his is a bug in the Ext JS code. First of all everything declared in the Ext.extend (including items) ends up in the new class