如何在Ext.FormPanel中有一些元素和网格?

时间:2013-02-07 12:48:07

标签: javascript extjs

我有一个ExtJs 3.4应用程序 我想在FormPanel上设置一些filds和grid我说:

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

你看我想在Form中有一个textfield,2个组合框和一个网格。结果:

enter image description here

但我预计组合框将高于网格 我做错了什么?

更新

当我使用布局时:表格就像在A1rPun的答案中我得到:

enter image description here

1 个答案:

答案 0 :(得分:1)

你做错了几件事。首先尝试最小化嵌套。做这样的事情:

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

接下来是每个容器的布局。您在没有父列和列布局的项目上指定columnWidthHere是一个很好的布局教程。

顺便说一下:在代码中找不到网格。