1

我有一个 ExtJs 3.4 应用程序。
我想在 FormPanel 上设置一些字段和网格我说：

            var searchPan = new Ext.FormPanel({
            title:'Поиск',
            labelAlign: 'top',
            frame:true,
            //xtype:'panel',
            //layout:'border',
            //region: 'center',
            split: true,
            collapseMode: "mini",
            collapsed:false,
            items:[{
                xtype:'fieldset',
                columnWidth: 0.5,
                title: 'Поиск объектов',
                collapsible: true,
                collapsed: true,
                autoHeight:true,
                defaults: {
                    anchor: '-20' // leave room for error icon
                },
                items: [{
                        xtype:'textfield',
                        fieldLabel: 'Диспечерское наименование',
                        name: 'name_dispather',
                        anchor:'100%',
                        enableKeyEvents: true,
                        listeners: {
                            'keyup': function(e) {
                                if(e.getValue().length>=4){
                                    var searchFromValues=search.getForm().getValues();
                                    searchStore.load({params:{'name':e.getValue(),'type':searchFromValues.objType,'voltage':searchFromValues.objVolt}});
                                }
                            }
                        }
                    },{
                        layout:'column',
                        //defaults: {/*flex: 1, */layout: 'form',},
                        items:[{
                            columnWidth:.5,
                            layout: 'form',
                            items: [{
                                    xtype: 'combo',
                                    anchor:'60%',
                                    name:'objType',
                                    fieldLabel: 'Тип Объектов',
                                    store: new Ext.data.SimpleStore({
                                        data: [
                                            [1, 'ВЛ'],
                                            [2, 'ТП']
                                        ],
                                        id: 0,
                                        fields: ['value', 'text']
                                    }),
                                    valueField: 'value',
                                    displayField: 'text',
                                    triggerAction: 'all',
                                    lazyRender:true,
                                    mode: 'local',
                                    editable: false
                                }]
                        },{
                            columnWidth:.5,
                            layout: 'form',
                            items: [{
                                xtype: 'combo',
                                anchor:'60%',
                                name:'objVolt',
                                fieldLabel: 'Напряжение',
                                store: new Ext.data.SimpleStore({
                                    data: [
                                        [1, '04'],
                                        [2, '6'],
                                        [3, '35'],
                                        [4, '110']
                                    ],
                                    id: 0,
                                    fields: ['value', 'text']
                                }),
                                valueField: 'value',
                                displayField: 'text',
                                triggerAction: 'all',
                                lazyRender:true,
                                mode: 'local',
                                editable: false
                            }]
                        },searchTab]
                    }]
                }]
        });

您会看到我想在表单中有一个文本字段、2 个组合框和一个网格。结果：

在此处输入图像描述

但我希望组合框会在网格上方。
我做错了什么？

更新

当我在 A1rPun 的答案中使用 layout: table 时，我得到：

在此处输入图像描述

4

1 回答 1

1

你做错了几件事。首先尽量减少嵌套。做这样的事情：

{
    xtype: 'form'
    items: [{
        xtype: 'fieldset',
        layout: 'table'
        items: [{
            xtype:'textfield',
            colspan: 2
        },{
            xtype: 'combobox'
        },{
            xtype: 'combobox'
        }]
    }]
},
{
    xtype: 'grid'
}

接下来是每个容器的布局。您正在指定columnWidth没有具有列布局的父项的项目。这是一个很好的布局教程。

顺便说一句：在您的代码中找不到网格。

于 2013-02-07T14:14:48.883 回答