Question

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

结构是，视觉上：

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

然后可能：

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

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

所有表单字段都是水平排列的（＆＃34;列＆＃34;布局）。

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

我认为可以应用一些属性来放置文本字段依赖于日期范围组合框，并且我已经看到AlignTo看起来很有前途，但与textField没有直接关系。

可以使用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
            }
        }
    }
]

Answer 1

管理某种形式的变通方法：

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

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

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

代码：

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

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

1 个答案: