ExtJs: which layout to choose for complex form with many fields

Question

I need to implement a big complex form in extjs. This form contains about 20 lines with 5-6 fields on each line. There are textfields, combos and just displayfields in these lines.

I implemented it with 'form' layout for the parent panel. And with 'hbox' layout panels for each line. In order to display field labels, I have to wrap each field into a panel with form layout again. It even sounds scary, could you imaging this mess? I feel like I'm doing it wrong.

Need an advice on how to do it in a right way!

Updated: please check an example of layout I'm trying to get.

enter image description here

Miles Miles · Accepted Answer · 2012-06-08T18:44:31

I use layout: 'column' quite a bit. Then you can tell each field how much of a columnWidth each one should have. When the widths add up to over 1, the fields wrap to the next line.

For your screenshot, all of them are a column width of a third, so you could do something like this:

  Ext.create('Ext.panel.Panel', {
    layout: 'column',
    defaults: {columnWidth: 0.3},
    items: [{
      xtype: 'textfield'
    },{
       ...
    }]
  });

ExtJs: which layout to choose for complex form with many fields

2 Answers