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 つのコンボボックス、1 つのグリッドが必要であることがわかります。そして結果：

ここに画像の説明を入力

しかし、コンボボックスがグリッドの上にあると思います。
私は何を間違っていますか？

アップデート

A1rPunの回答のようなレイアウト：テーブルを使用すると、次のようになります：

ここに画像の説明を入力

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 に答える