I have a simple Ext JS 4 form inside a window (MVC style app). The example below shows 4 fields. This example is simplified, but now I need to take these fields and lay them out using hbox and vbox (and possibly others?)
How would I for example, take the first two fields and put the in a hbox at the top of the form so they display horizontally, at the top of the form, then take the rest of the fields and put them in a vbox below that hbox so they display vertically?
(my actual form has a lot more fields and I will have various other hbox/vboxes, but I am just looking to get started):
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID'
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#'
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
}
]
}
I have looked at various examples of layout sencha page , sencha docs, and finally another one -- this last one has something that looks close - in the form tree, fieldsets in 2 columns, it shows a form with items[] and inside there some layout code, and I was able to get that to partially work, but was not able to convert it to an hbox/vbox style layout. When I set it to hbox, there is no height to the hbox, so I can not see the fields.
Here is example:
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
items: [{
xtype: 'form',
items: [
{
xtype: 'panel',
border: false,
layout: 'hbox',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID',
flex: 0.5
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#',
flex: 0.5
}
]
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
]
}]
});
If you want to displays blocks in form from up to down, you don't need to change layout. I've wrapped only 2 first display fields into panel with hbox layout (because you want to split only first row).