PDA

View Full Version : error in function call



jnroche
15 Sep 2009, 12:35 AM
Hi Guys!

I just started tinkering extjs and so far so good with all those great stuffs its built. My code below:


var s = function(){

var multiuploadbox = new Ext.Panel({
autoScroll:false,
layout: 'column',
fileUpload:true,
defaultType:'textfield',
items:[
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',items:[{fieldLabel:'Size', emptyText:'size'}]},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',items:[{fieldLabel:'Color', emptyText:'color'}]},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',items:[{fieldLabel:'Qty', emptyText:'quantity'}]},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',items:[{xtype:'fileuploadfield', fieldLabel:'Upload Screenshot', buttonCfg:{iconCls:'upload-icon'}}]}
]
});

s.superclass.constructor.call(this, {
id:'multibox-'+Math.random(),
items:[
multiuploadbox
],
buttons:[
{text: 'Add More', handler:function(){ this.addBox(multiuploadbox); } }
]
});
}


Ext.extend(s, Ext.Panel, {

removeBox : function(multibox_panelid){
this.remove(multibox_panelid);
this.doLayout();
},
addBox : function(thisbox){
this.add(thisbox);
this.doLayout();
}

});

produces error on this.addBox it says this.addBox is not a function ?? am i doing anything wrong please point me out i'm very new to extjs and i love it!

Cheers!

BitPoet
15 Sep 2009, 1:10 AM
At the time your handler is executed, this referse to the button's element, not to your extended panel. You could either reference the panel via Ext.getCmp('id-of-your-panel') or (easier) set the 'scope (http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Button&member=scope)' property of the button appropriately.


,buttons: [
text: 'Add More',
handler: function() { this.addBox(multiuploadbox); },
scope: this
]

jnroche
15 Sep 2009, 3:16 AM
thanks for the quick reply! the scope worked! however my code does not seem to work. Everytime i click on add more button i get this error in firebug:

Permission denied to get property XULElement.accessibleType
http://localhost/ext-3.0.0/ext-all-debug.js
Line 57732

anonymous()ext-all-debug.js (line 57732)
anonymous()ext-all-debug.js (line 57757)
anonymous()ext-base-debug.js (line 1667)


chrome://firebug/content/blank.gifthis.doc.close();\r\next-all-debug.js (line 57732)

I cannot read what its saying.

Got any ideas?

BitPoet
15 Sep 2009, 7:01 AM
I'm not sure what' the reason for this, but I noticed the following line:


id:'multibox-'+Math.random(),

which is actually a bad thing, as Math.random() might return identical numbers.
You should use


id: Ext.id(false, 'multibox-'),

instead to have Ext take care of avoiding identical ids.

jnroche
15 Sep 2009, 7:10 AM
thank you bitpoet, i tried your suggestion regarding the id. Everything seems ok, no errors on firebug and console but the thing is its not working the way i intended it to. it's suppose to add additional line of textboxes and fileupload box (size textfield, color textfield, qty textfield, fileupload field) and the line should just be duplicated everytime 'add more' button is clicked.

I have no clue. Please help.


Many Thanks!

BitPoet
15 Sep 2009, 7:20 AM
I looked at it a bit closer, and you're doing two fundamental things wrong:
- you're trying to add the same panel over and over (the panel object in multiuploadbox)
- and you're overnesting in the panel's items, declaring a defaultType of 'textfield' but you try to add the fields as children of the panels items


// Made multipuploadbox a generator function, though TMTOWTDY:
var multiuploadbox = function() {return new Ext.Panel({
autoScroll:false,
layout: 'column',
fileUpload:true,
defaultType:'textfield',
items:[
// Got rid of the erroneous items[..]:
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Size', emptyText:'size'},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Color', emptyText:'color'},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Qty', emptyText:'quantity'},
{columnWidth: .4, bodyStyle:'padding:5px 0 5px 5px',xtype:'fileuploadfield', fieldLabel:'Upload Screenshot'}
]
});
};

var s = function(){
s.superclass.constructor.call(this, {
id: Ext.id(false, 'multibox-'),
renderTo: document.body,
items:[
multiuploadbox() // Added round braces
],
buttons:[
{
text: 'Add More',
handler:function(){ this.addBox(multiuploadbox()); }, // here as well
scope: this
}
]
});
};

jnroche
16 Sep 2009, 12:53 AM
thank you so much for helping!

However, it still did not work. I moved the multiuploadbox function directly to where the addBox function is, inside it. Now it works, I don't know why your suggestion does not work.. Could it be that the new keyword was only executed once by extjs? calling the new keyword constantly at runtime seems to resolve the issue. But im still not sure why?

Anyhow, this is where it worked:



Ext.extend(s, Ext.Panel, {

removeBox : function(multibox_panelid){
this.remove(multibox_panelid);
this.doLayout();
},
addBox : function(thisbox){
this.add(new Ext.Panel({
autoScroll:false,
layout: 'column',
fileUpload:true,
defaultType:'textfield',
items:[
// Got rid of the erroneous items[..]:
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Size', emptyText:'size'},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Color', emptyText:'color'},
{columnWidth: .2, bodyStyle:'padding:5px 0 5px 5px',fieldLabel:'Qty', emptyText:'quantity'},
{columnWidth: .4, bodyStyle:'padding:5px 0 5px 5px',xtype:'fileuploadfield', fieldLabel:'Upload Screenshot'}
]
}));
this.doLayout();
}

});


Thanks again for taking the time helping. This software is so much awesome it could replace VB. HAHA!

BitPoet
16 Sep 2009, 6:39 AM
Maybe that was just a copy&paste error, as I snipped the code above 1:1 from a working test page. Calling 'new' again is neccessary, but your code isn't really different from mine in that.