PDA

View Full Version : "c is undefined" while using TabPanel



Mairym13
30 Jul 2009, 5:51 AM
Hello,

I have a problem trying to create a tabPanel.

I have created a very simple exemple in order to understand how to use it:

var tabChauff = new Ext.TabPanel({
activeTab: 0,
width:600,
height:250,
defaults : {labelSeparator :''},
plain:true,
items:[{
width :90,
html :lang.ongletRessources_chauffeur_adresse//"adresse"
},{
width :90,
html :lang.ongletRessources_chauffeur_ville//"ville"
}
]
});I use it in :


var formChauffeur = new Ext.Panel({
id :'formChauffeur',
frame :true,
labelAlign :'left',
bodyStyle :'padding:15px 15px 15px 15px;',
trackResetOnLoad :true,
layout :'form',
items : [new Ext.form.FieldSet( {
// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
title :lang.ongletRessources_chauffeur,
border :true,
height :140,
defaults : {labelSeparator :''},
items : [ {
layout :'table',
layoutConfig : {
columns :5
},
items : [ {
width :90,
html :lang.ongletRessources_chauffeur_nom
}, {
id :'ongletRessources_formChauffeur_nom',
xtype :'textfield',
tabIndex :0,
maxLength :50,
tabIndex :0,
allowBlank :false,
validateOnBlur :true,
msgTarget :'qtip',
monitorResize :true
},{
width :30,
html :' '
},{
width :150,
html :lang.ongletRessources_chauffeur_codeChauffeur
}, {
id :'ongletRessources_formChauffeur_codeChauffeur',
xtype :'textfield',
tabIndex :3,
maxLength :50,
tabIndex :7,
allowBlank :false,
validateOnBlur :true,
msgTarget :'qtip',
monitorResize :true
},{
colspan :5,
width :30,
html :' '
},{
width :90,
html :lang.ongletRessources_chauffeur_prenom
}, {
id :'ongletRessources_formChauffeur_prenom',
xtype :'textfield',
tabIndex :0,
maxLength :50,
tabIndex :1,
allowBlank :false,
validateOnBlur :true,
msgTarget :'qtip',
monitorResize :true
},{
colspan :5,
width :30,
html :' '
},{
colspan :5,
width :30,
html :' '
},{
width :90,
html :lang.ongletRessources_chauffeur_dateNaiss
},{
fieldLabel: '',
name: 'startdt',
id: 'startdt',
xtype :'datefield',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
},{
width :30,
html :' '
}]
}]
}),

new Ext.form.FieldSet( {
// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
title :lang.ongletPoi_winOptionCreePoi_coordCivile,
border :true,
height :250,
defaults : {},
items : [tabChauff]
})]
});But, no matter what I try, it always says "c is undefined". It seems to be caused when the tabPanel is empty, but mine isn't, is it?

Does anyone have an idea?:-?

Thanks a lot!

andycramb
30 Jul 2009, 6:41 AM
I would break it down
Try rendering one Ext component at a time.

Does tabChauff render? Do that with the rest and then add them to a container type and take it from there.

It also helps if your code is readable:)

Mairym13
30 Jul 2009, 11:46 PM
Thank you for your reply Andycramb,

but my english isn't that good and I don't really understand what you wrote

"I would break it down"
Do you mean split my panel?

"Try rendering one Ext component at a time."
rendering=create?

"Does tabChauff render? "
Does my tabchauff works alone?

"Do that with the rest and then add them to a container type and take it from there."
euh....

"It also helps if your code is readable:)"
What can I do to be more readable, stp?

Thanks again and sorry that I have problems understanding

andycramb
31 Jul 2009, 1:15 AM
Thank you for your reply Andycramb,

but my english isn't that good and I don't really understand what you wrote
Ok lets see if I can help

"I would break it down"
Do you mean split my panel?

No do one component at a time and render that on to the page
For example you have how many components? Build the elements up one at a time to give you confidence that each one works. So do this and only this to start with:


var tabChauff = new Ext.TabPanel({
activeTab: 0,
renderTo: 'aDiv',
width:600,
height:250,
defaults : {labelSeparator :''},
plain:true,
items:[{
width :90,
html :lang.ongletRessources_chauffeur_adresse//"adresse"
},{
width :90,
html :lang.ongletRessources_chauffeur_ville//"ville"
}
]
});So make sure the above renders/inserted in to your page to your liking then if it does add it to your fieldset, for example


new Ext.form.FieldSet({
// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
title: lang.ongletPoi_winOptionCreePoi_coordCivile,
renderTo:'aDiv'//this is an id of a div on your HTML page
border: true,
height: 250,
defaults: {},
items: [tabChauff]
})

Continue working on that principle until you are comfortable
Use http://jsbeautifier.org/ to layout your code

Condor
31 Jul 2009, 3:54 AM
Do NOT use renderTo in combination with with layouts!!!

First of all, indent your code properly:

var tabChauff = new Ext.TabPanel({
activeTab: 0,
width: 600,
height: 250,
defaults: {
labelSeparator: ''
},
plain: true,
items: [{
width: 90,
html: lang.ongletRessources_chauffeur_adresse //"adresse"
},{
width: 90,
html: lang.ongletRessources_chauffeur_ville //"ville"
}]
});
var formChauffeur = new Ext.Panel({
id: 'formChauffeur',
frame: true,
labelAlign: 'left',
bodyStyle: 'padding:15px 15px 15px 15px;',
trackResetOnLoad: true,
layout: 'form',
items: [new Ext.form.FieldSet({
// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
title: lang.ongletRessources_chauffeur,
border: true,
height: 140,
defaults: {
labelSeparator: ''
},
items: [{
layout: 'table',
layoutConfig: {
columns: 5
},
items: [{
width: 90,
html: lang.ongletRessources_chauffeur_nom
},{
id: 'ongletRessources_formChauffeur_nom',
xtype: 'textfield',
tabIndex: 0,
maxLength: 50,
tabIndex: 0,
allowBlank: false,
validateOnBlur: true,
msgTarget: 'qtip',
monitorResize: true
},{
width: 30,
html: ' '
},{
width: 150,
html: lang.ongletRessources_chauffeur_codeChauffeur
},{
id: 'ongletRessources_formChauffeur_codeChauffeur',
xtype: 'textfield',
tabIndex: 3,
maxLength: 50,
tabIndex: 7,
allowBlank: false,
validateOnBlur: true,
msgTarget: 'qtip',
monitorResize: true
},{
colspan: 5,
width: 30,
html: ' '
},{
width: 90,
html: lang.ongletRessources_chauffeur_prenom
},{
id: 'ongletRessources_formChauffeur_prenom',
xtype: 'textfield',
tabIndex: 0,
maxLength: 50,
tabIndex: 1,
allowBlank: false,
validateOnBlur: true,
msgTarget: 'qtip',
monitorResize: true
},{
colspan: 5,
width: 30,
html: ' '
},{
colspan: 5,
width: 30,
html: ' '
},{
width: 90,
html: lang.ongletRessources_chauffeur_dateNaiss
},{
fieldLabel: '',
name: 'startdt',
id: 'startdt',
xtype: 'datefield',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
},{
width: 30,
html: ' '
}]
}]
}),
new Ext.form.FieldSet({
// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
title: lang.ongletPoi_winOptionCreePoi_coordCivile,
border: true,
height: 250,
defaults: {},
items: [tabChauff]
})]
});

Stuff I noticed:
1. Both fieldsets don't have a width defined. You probably want anchor:'0' to make them use the width of the container.
2. Why does the first fieldset contain a panel with a table layout (overnested)? Why not make the fieldset layout:'table' and remove the extra panel.
3. Your second fieldset doesn't have a layout. You probably want layout:'fit'.
4. Using {html: 'content', ...} will create a panel with the content in the body. I would recommend changing this to {xtype: 'box', autoEl: {cn: 'content'}, ...} (which uses far less resources).

andycramb
31 Jul 2009, 4:09 AM
Do NOT use renderTo in combination with with layouts!!!

Condor is pointing out in my previous post that when you include your tabChauff in the fieldset you need to remove the renderTo property from tabChauff and use layout in the fieldset instead.

Mairym13
31 Jul 2009, 4:17 AM
Thank you very much for all your replies, I am going to try them and come back

Mairym13
11 Aug 2009, 4:25 AM
Sorry, I haven't been able to find the problem. And as my internship ends tomorrow, I won't be able to continue working on it.

Thanks again for your help