PDA

View Full Version : Uncaught TypeError on instantiating a Panel



v4l3nt1n
16 Oct 2013, 7:53 AM
Hi guys, i've been trying to dinamically add panels to a fieldset. I defined the panel with column layout separately so i make instances when needed.
The thing is i can't make it work like i want to, maybe i'm missing something here.
Using ExtJS 3.4.0

Here's the code:


var fertilizationColumn = Ext.extend(Ext.Panel, {
id: 'fertilizationColumn',
layout: 'column',
border: false,
autoHeight: true,
items: [
{
layout: 'form',
columnWidth: 0.1,
border: false,
items: [{
width: 30,
fieldLabel: 'Add',
hideLabel: true,
xtype: 'button',
text: ' - ',
listeners: {
click: function(btn, event) {
var fieldSet = this.findParentByType(Ext.Panel);
console.log(fieldSet.id);
}
}
}]
},
{
layout: 'form',
columnWidth: 0.2,
border: false,
items: [{
xtype: 'datefield',
fieldLabel: 'Date',
anchor: '95%',
hideLabel: true,
name: 'date'
}]
},{
layout: 'form',
columnWidth: 0.3,
border: false,
items:[{
xtype: 'combo',
anchor: '95%',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
hideLabel: true,
editable: false,
fieldLabel: 'Type',
name: 'type',
displayField: 'header',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['header', 'value'],
data : [
{header: 'NH3', value: 'nh3'},
{header: 'NH4NO3', value: 'nh4no3'},
{header: '(NH4)2SO4', value: '(nh4)2so4'},
{header: '(NH4)3(NO3)(SO4)', value: '(nh4)3(no3)(so4)'},
{header: 'UREA', value: 'urea'},
]
})
}]
},{
layout: 'form',
columnWidth: 0.2,
border: false,
items:[{
xtype: 'combo',
anchor: '95%',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
hideLabel: true,
editable: false,
fieldLabel: 'Position',
name: 'position',
hiddenName: 'position',
displayField: 'header',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['header', 'value'],
data : [
{header: 'Banded', value: 'banded'},
{header: 'Broadcast', value: 'broadcast'},
{header: 'Deeply', value: 'deeply'},
{header: 'Injected', value: 'injected'},
]
})
}]
},{
layout: 'form',
columnWidth: 0.2,
border: false,
items: [{
fieldLabel: 'Amount [kg/ha]',
hideLabel: true,
width: 90,
xtype: 'field',
name: 'amount'
}]
}
]
});


var fertilizationFieldSet = new Ext.form.FieldSet({
title:'Fertilization',
itemId: 'fertilizationFieldSet',
labelAlign: 'center',
items: [
{
layout: 'column',
border: false,
autoHeight: true,
defaultType: 'label',
defaults: {
style: 'text-align: center;'
},
items: [
{
xtype: 'button',
layout: 'form',
columnWidth: 0.1,
border: false,
text: 'Add',
listeners: {
click: function(btn, event) {
var fieldSet = this.findParentByType(Ext.form.FieldSet);
fieldSet.items.add(new fertilizationColumn);
fieldSet.doLayout();
},
},
},
{
layout: 'form',
columnWidth: 0.2,
border: false,
text: 'Date',
},
{
layout: 'form',
columnWidth: 0.3,
border: false,
text: 'Type',
},
{
layout: 'form',
columnWidth: 0.2,
border: false,
text: 'Position',
},
{
layout: 'form',
columnWidth: 0.2,
border: false,
text: 'Amount [kg/ha]',
},
]
},
new fertilizationColumn,
]
});


I'm getting this error:
Uncaught TypeError: Object [object Array] has no method 'add'

Thanks in advance!

Valentin

slemmon
17 Oct 2013, 10:22 PM
Any trouble if you try and instantiate just a panel by itself in the fieldset?
What about trying to instantiate just a fertilizationColumn?
*don't forget the () after new fertilizationColumn.

willigogs
18 Oct 2013, 12:53 AM
I'm pretty sure you're trying to use the add method on an unsupported object.

In your code where you have "fieldSet.items.add(new fertilizationColumn)", I would imagine that trying to add it to the "items" object is incorrect. You should be instead trying to add this to your fieldset object.

slemmon
21 Oct 2013, 2:25 PM
Good catch willigogs. I overlooked that add() was being used on the items property of the fieldset.