Understanding on component rendering & related layouts

[guptaro]

Greetings!
I have taken up learning extJs and working with it very recently. I have gone through the examples given on the site and tried to create some pages. Besides I am trying to read as many articles as I could get either on this site or any other site I could find by searching on Google to clearly understand how components can be rendered and what part do layouts play when rendering a component. Some of my attempts have been successful and I managed to create what I wanted but some of them simply wouldn't work as I want them.

For example I want to use the following code to create a couple of datefields and then two buttons one to post the query to server and one to reset. Both the buttons appear one above the other with no space in between whereas I want them to appear side by side. I tried using column layout inside form layout. But the buttons would just disappear.



var searchPanel = new Ext.FormPanel({
region:'north',
labelWidth: 75,
height:150,
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:20px'},
items:[{
//title:'.',
layout:'form',
defaults: {width: 130},
defaultType: 'textfield',
items: [ new Ext.form.DateField({
fieldLabel: 'Start Date',
name: 'startdt',
id: 'startdt',
//vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
}),
new Ext.form.DateField({
fieldLabel: 'End Date',
name: 'enddt',
id: 'enddt',
//vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
}),
new Ext.Button({
text:'Reset'
}),
new Ext.Button({
text:'Search'
})
]
}]
}
});

I feel there are some fundamental concepts that I have not picked yet and hence struggling to control the laying out of components as I would like.
Any pointers to right tutorials or documents discussing how to control rendering of components will be much appreciated.

Is there a book scheduled to be published sometime soon?

Thanks in advance.

[mjlecomte]

Suggestions:

use [ code ] tags when posting code (properly indent it as well).
don't hold out for a book, who knows if or when it will come to fruition...may not even address your questions.
post questions in the Help forum, not Open Discussion.
one of the examples in the demos is a layout browser example, showcases many of the layouts available.
post screenshots of what you have now so someone can understand what you're seeing.
suggest you start from an example in the demos that most closely matches what you want then tweak from there.

[guptaro]

All points taken. Shall post my query in help forum as well.
I actually have stared with layout-browser example and have managed to create something very close to what I wanted, but not exactly what I wanted. This is why I feel I am yet to grasp fundamentals of laying out components with extjs and looking forward to any detailed explanation. I have attached the screen shot for your viewing and advise.

Thanks in advance,
Guptaro

[mjlecomte]

I'd take a look at the dynamic form example. You can pass a buttons: config option to the panel.



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [
...
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

[Animal]

The concept to grasp is that child Components of a Container are rendered by the layout manager specified in the layout config.

Some layout managers also manage the size and position of child Components. Border layout, and column layout do this.

layout: 'form' uses the Ext.form.FormLayout class to simply render the child Components sequentially.

FormLayout can use the anchor config on child Components to anchor the child elements to the Container's sides.

So those two Buttons are just layed out in accordance with the FormLayout's function - in a column.

The buttons config allows you to specify buttons in the footer of a Panel.

Also, see the tbar/B] and [B]bbar configs which allow you to specify a top Toolbar and bottom Toolbar.