0

私はいくつかのボタンを持つ次のコンテナを持っています:

{
                    xtype : 'container',
                    width : 320,
                    layout : 'hbox',
                    cls : 'readable-form no-border',
                    labelSeparator : '',
                    ref : '../sendBackForm',
                    layoutConfig: {
                        padding:'5',
                        pack:'center',
                        align:'middle'
                    },
                    style : {
                        margin : 'auto'
                    },
                    items : [ {
                        xtype : 'button',
                        itemId : 'yes',
                        iconCls : 'save-button-icon',
                        text : 'Yes',
                        ref : '../../yes'
                    }, {
                        xtype : 'spacer',
                        width : 10
                    }, {
                        xtype : 'button',
                        itemId : 'checker',
                        iconCls : 'save-button-icon',
                        text : 'Back to checker',
                        ref : '../../checker'
                    }, {
                        xtype : 'spacer',
                        width : 10
                    }, {
                        xtype : 'button',
                        itemId : 'prebooker',
                        iconCls : 'save-button-icon',
                        text : 'Back to prebooker',
                        ref : '../../prebooker'
                    }, {
                        xtype : 'spacer',
                        width : 10
                    }, {
                        xtype : 'button',
                        itemId : 'cancel',
                        text : 'Cancel',
                        ref : '../../cancel'
                    }, {
                        xtype : 'spacer',
                        width : 90
                    }, {
                        xtype : 'button',
                        itemId : 'ok',
                        hidden : true,
                        text : 'Ok',
                        ref : '../../ok'
                    } ]

                }

問題は、すべてのボタンを非表示にして、[OK] ボタンのみを表示したい場合、ウィンドウの左隅の近くに表示されることです。ウィンドウの中央に配置するにはどうすればよいですか?

4

3 に答える 3

1

この次のコードをコンテナに追加しようとしましたか? :autoEl: {tag: 'center'}

于 2013-10-28T14:18:53.737 に答える
1

「OK」ボタンの前後にスペーサーを置いてみたり、

...
items: [
...
{xtype: 'tbspacer', flex: 1},
{
    xtype : 'button',
    itemId : 'btnok',
    hidden : true,
    text : 'Ok',
    ref : '../../ok'
},
{xtype: 'tbspacer', flex: 1}
...

「OK」および「キャンセル」ボタンハンドラ

....
bindHandlers: function(){
    var me = this;
    me.getComponent('btnok').on('click', function(){
        me.toggleButtons(true);
    });

    me.getComponent('btncancel').on('click', function(){
        me.toggleButtons(false);
    });      
},
toggleButtons: function(visible){
    this.getComp('btnyes').setVisible(visible);
    this.getComp('checker').setVisible(visible);
    this.getComp('prebooker').setVisible(visible);
    this.getComp('btncancel').setVisible(visible);
    this.getComp('btnok').setVisible(!visible);
}
...

または、「OK」ボタンの前後に手動でスペーサーを追加します

于 2013-10-29T06:50:28.680 に答える
0

layoutConfig が機能しなくなったようです レイアウト構成自体に「pack」と「align」を設定し、ここで調整します(「OK」以外のすべてを非表示にするには、「はい」ボタンをクリックします)

于 2013-10-31T05:02:28.647 に答える