ExtJS 4在表单中设置表单字段的位置答案

【问题标题】：ExtJS 4 set position of form field within formExtJS 4在表单中设置表单字段的位置
【发布时间】：2014-04-23 01:12:34
【问题描述】：

我在网格的 tbar 中构建了一个 ExtJS 表单，它允许过滤网格结果。

结构在视觉上是：

用于指定日期类型的组合框
用于指定日期范围类型的组合框

然后可能：

没有或
包含特定日期值的组合框或
两个日期选择器

以文本字段结尾，用于进一步过滤结果中的文本值。

所有表单域都水平排列（“列”布局）。

其中一种日期范围类型是“全部”，它消除了对具有特定日期值或日期选择器的组合框的需要，这两个选项占用相同的空间。为了视觉上的一致性，文本过滤器将保持在同一个位置，而不管它与日期范围类型组合框之间的内容是什么。

我假设可以应用一些属性来放置依赖于日期范围组合框的文本字段，我已经看到 AlignTo 看起来很有希望，但与文本字段没有直接关系。

是否可以使用 AlignTo 或类似方法将表单域设置为与另一个表单域的距离，如果可以，如何设置？

示例代码：

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

【问题讨论】：

标签： layout extjs textfield

【解决方案1】：

管理某种形式的解决方法：

首先，仅适用于显式宽度列：[code]columnWidth[/code] 更改为 [code]width[/code] 并且宽度值变为像素数。

在文本字段之前有一个显示字段，它可以占用与它“替换”的组合框/日期选择器相同的宽度，并在需要时将其隐藏（即组合框或日期选择器都被隐藏），各种 hide() 和 show() 调用。

非常简单，但我认为 ExtJS 中有更好的布局控制，并且不需要额外的元素。

代码：

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

【讨论】：