PDA

View Full Version : Problem running code from J. Garcia's ExtJS In Action Book



TrotskyIcepick
14 May 2010, 3:50 AM
I am trying to learn ExtJS using an early access edition of Jesus Garcia's excellent ExtJS In Action. Have reached a chapter where we create a complex form layout and the code (which seems pretty OK to me) produces errors in Firebug. The .js code is as follows:


Ext.onReady(function() {

var fieldset1 = {
xtype : 'fieldset',
title : 'Name',
flex : 1,
border : false,
labelWidth : 60,
defaultType : 'field',
defaults : {
anchor : '-10',
allowBlank : false
},
items : [
{
fieldLabel : 'First',
name : 'firstName'
},
{
fieldLabel : 'Middle',
name : 'middle'
},
{
fieldLabel : 'Last',
name : 'firstName'
}
]
}

var fieldset2 = Ext.apply({}, {
flex : 1,
title : 'Address Information',
items : [
{
fieldLabel : 'Address',
name : 'address'
},
{
fieldLabel : 'Street',
name : 'street'
},
{
xtype : 'container',
border : false,
layout : 'column',
anchor : '100%',
items : [
{
xtype : 'container',
layout : 'form',
width : 200,
items : [
{
xtype : 'textfield',
fieldLabel : 'State',
name : 'state',
anchor : '-20'
}
]
},
{
xtype : 'container',
layout : 'form',
columnWidth : 1,
labelWidth : 30,
items : [
{
xtype : 'textfield',
fieldLabel : 'Zip',
anchor : '-10',
name : 'zip'
}
]
}
]
}
]
}, fieldset1);

var fieldsetContainer = {
xtype : 'container',
layout : 'hbox',
height : 120,
layoutConfig : {
align : 'stretch'
},
items : [
fieldset1,
fieldset2
]
}

var tabs = [
{
xtype : 'container',
title : 'Phone Numbers',
layout : 'form',
bodyStyle : 'padding:6px 6px 0',
defaults : {
xtype : 'textfield',
width : 230
},
items: [
{
fieldLabel : 'Home',
name : 'home'
},
{
fieldLabel : 'Business',
name : 'business'
},
{
fieldLabel : 'Mobile',
name : 'mobile'
},
{
fieldLabel : 'Fax',
name : 'fax'
}
]
},
{
title : 'Resume',
xtype : 'htmleditor',
name : 'resume'
},
{
title : 'Bio',
xtype : 'htmleditor',
name : 'bio'
}
];

var tabPanel = {
xtype :'tabpanel',
activeTab : 0,
deferredRender : false,
layoutOnTabChange : true,
border : false,
flex : 1,
plain : true,
items : tabs
}

var myFormPanel = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : 'Our complex form',
height : 360,
frame : true,
id : 'myFormPanel',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
items : [
fieldsetContainer,
tabPanel
]
});


});The error produced is as follows:

types[config.xtype || defaultType] is not a constructor
chrome://firebug/content/blank.gifreturn config.render ? confi...s[config.xtype || defaultType](config);\n ext-all-debug.js Line 14591

Upon drilling down into the error information, it appears that there is a problem with the following section of code (in particular the tabPanel line in the items list) :


var myFormPanel = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : 'Our complex form',
height : 360,
frame : true,
id : 'myFormPanel',
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
items : [
fieldsetContainer,
tabPanel
]
});Any ideas? Apologies for the lengthy segment of code, I'm just a learner coder :D

Thanks
Andrew

jay@moduscreate.com
14 May 2010, 3:55 AM
you're absolutely correct. it should be defaultType : 'textfield',

jay@moduscreate.com
14 May 2010, 3:55 AM
is that in chapter 4 btw?

jay@moduscreate.com
14 May 2010, 4:02 AM
Nope, chapter 6. Updated the examples: http://extjsinaction.com/examples/chapter06/

TrotskyIcepick
14 May 2010, 10:43 AM
Thanks Jesus for the super quick response, you are right all now works as expected.

TBH I'm on my second run through the book (having got as far as ch6), this time with an editor that has code assist, I found first time through that with many of the examples having multiple layers (if thats the right term) inside brackets, that I just lost track (and also, some errors in the code, only minor stuff that I was able to figure out....sorry for not flagging them up ;-().

I'm not a natural 'programmer' but even though I have a MEAP edition of the book it is easy to follow with understandable (though ocassionally very complex) example code....and 'most' importantly is written with a great deal of enthusiasm for your subject.

Now all I need is some good 'real world' examples (I find the examples, particularly those of interest like the FeedViewer and ForumViewer, in the ExtJS install to be 'massively' complex, certainly not for beginners). Can't wait to go further into the book to see what other code you come up with!!

Keep up the good work both on the book and here on the forums, can't wait to get my hands on a paper copy ;-)

Regards
Andrew