ExtJS 4 set position of form field within form

Question

I have an ExtJS form constructed within a grid's tbar which allows for filtering of grid results.

The structure is, visually:

• A combobox for specifying date type
• A combobox for specifying date range type

then potentially either:

• Nothing or
• A combobox containing specific date values or
• Two datepickers

ended with a textfield for further filtering on text values within the results.

All form fields are arranged horizontally ("column" layout).

One of the date range types is "All", which removes the need for the combobox with specific date values or datepickers, both options taking up the same space. In the interest of visual consistency the text filter is to stay in the same place regardless of what is between it and the date range type combobox.

I would assume that there would be some property that can be applied to place the textfield dependent on the date range combobox, and I've seen AlignTo which looks promising, but not directly related to a textField.

Can AlignTo or similar be used to set a form field a set distance from another form field, and if so how?

Example code:

xtype: 'form',
id: 'gridFilterForm',
url: '<?= $site_url ?>Production/Schedule',
layout: 'column',
standardSubmit: true,
// The fields
defaultType: 'textfield',
items: [
    {
        xtype: 'combobox',
        id: 'dateFilterPicker',
        store: dateFilterPickStore,
        querymode: 'local',
        editable: false,
        fieldLabel: 'Filter Type:',
        labelWidth: 45,
        labelAlign:'top',
        displayField:'name',
        valueField:'value',
        value: '<?= $this->data['filterDateType'] ?>',
        listeners: {
            change: loadProductionItems
        }
    },
    {
        xtype: 'combobox',
        id:'dateRangePick',
        store: dateRangePickStore,
        queryMode: 'local',
        editable: false,
        fieldLabel: 'Filter On:',
        labelAlign:'top',
        labelWidth: 45,
        displayField: 'name',
        valueField: 'value',
        value: '<?= $this->data['filterDateRange'] ?>',
        listeners:{
            change: changeStoresAndFilters 
        },
        width: 65,
        allowBlank: false
    },{
        xtype: 'combobox',
        id:'dateRangeFrom',
        fieldLabel: 'Range:',
        labelAlign:'top',
        editable: false,
        labelWidth: 45,
        store: dateRangeStore,
        queryMode: 'remote',
        displayField: 'Name',
        valueField: 'Id',
        columnWidth:.60,
        listeners: {
            select: function(value){
                // actions
            }
        }
    },{
        xtype:'datefield',
        id: 'fromDatePicker',
        fieldLabel: 'From',
        labelAlign:'top',
        editable: false,
        labelWidth: 40,
        hidden: true,
        disabled: true,
        columnWidth:.30,
        format: 'd M Y',
        listeners: {
            select: function(){
                // actions
            }
        }
    },{
        xtype:'datefield',
        id: 'toDatePicker',
        fieldLabel: 'To',
        labelAlign:'top',
        editable: false,
        labelWidth: 30,
        hidden: true,
        disabled: true,
        columnWidth:.30,
        format: 'd M Y',
        listeners: {
            select: function(){
                // actions
            }
        }
    },{
        xtype: 'textfield',
        id: 'searchTextBox',
        fieldLabel: 'Search Text:',
        labelAlign:'top',
        labelWidth: 70,
        columnWidth:.30,
        listeners: {
            change: function(){
                // actions
            }
        }
    }
]

Answer 1

Managed some form of a workaround:

Firstly, works only with explicit width columns: [code]columnWidth[/code] changes to [code]width[/code] and width values become numbers of pixels.

Have a displayfield, just before the text field, that can occupy the same width as the combobox/datepickers it "replaces", and have it be hidden until it is needed (i.e. both the combobox or datepickers are hidden), with various hide() and show() calls.

Remarkably simple, but I'd have thought there was better layout control in ExtJS and wouldn't have needed additional elements.

code:

... //combobox and datepickers
{
    id: 'spacer',
    xtype: 'displayfield',
    width: 240
},
... // textfield search box