3

2つのコンボボックスがあるパネルがあります。コンボ ボックスの横にボタンを追加する必要があります。コンボ ボックスとボタンの両方が同じ行にある必要があります。以下は私のパネルです。

filterPanel = new Ext.Panel({
        renderTo: document.body,
          bodyStyle: 'padding-top: 6px;',
    title: 'Filters',
        collapsible: true,
        collapsed: true,
        shadow: 'sides',
        width: 400,
        frame: true,
        floating: true,
        layout: 'form',
        labelWidth: 150,
        buttonAlign: 'center',
        items: [
            {
                xtype: 'combo',
                id: 'xFilter',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Filter',
                store: filterStore,
                displayField:'filterDisp',
                valueField:'filterVal',
                typeAhead: true,
                editable: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:false
            },{
                xtype: 'combo',
                id: 'xStatus',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Status',
                store: statusStore,
                displayField:'statusDisp',
                valueField:'statusVal',
                typeAhead: true,
                editable: false,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:false
            }
        ]
    });

最初のコンボボックスとボタンの両方が同じ行になるように、ボタンを最初のコンボボックスに隣接させる必要があります。誰かがこれについて私を助けてもらえますか?

前もって感謝します...

4

2 に答える 2

3

ExtJS 4 では「compositefield」が使用できなくなったため、代わりに「fieldcontainer」を使用できます。

var config = {
    xtype:'fieldcontainer',
    layout:'hbox',
    fieldLabel: 'Combobox',
    items:[{
        xtype: 'combo',
        flex:1
        //rest of combo config,
    },{
        xtype:'button',
        text: 'Add New',
        handler: function(){
            //add new record
        }
    }]
};
于 2012-10-17T20:23:25.427 に答える
0

複合フィールドを使ってみる

{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}

またはhboxまたは列レイアウトを使用します。

于 2012-04-11T08:40:20.790 に答える