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
}
}
}
]