2

extjsにウィザードがあり、次に、戻る、キャンセルボタンを配置します。要件に応じて、次のボタンに自動的にフォーカスを設定する必要があります。どうやってするの。

buildButtons : function() {
    return [
    {
        text:'Back',
        id:'backBtn',
        hidden:true,
        autoHeight:true,
        action: 'Back'
    },
    {
        text:'Next',
        id:'nextBtn',
        autoHeight:true,
        hidden:false,
        action: 'Next'
    },
    {
        text:'Finish',
        id:'finishBtn',
        autoHeight:true,
        hidden:false,  // Comments below line if you want finished button on each panel.
        //hidden:true,
        action: 'Finish'
    },
    {
        text:'Cancel',
        id:'cancelBtn',
        autoHeight:true,
        hidden:false,
        action: 'Cancel'
    }
    ];

}
4

3 に答える 3

5

最新バージョン（4.1.1）について話していると仮定します

ボタンの参照を取得し、フォーカスを呼び出す

これは、ボタン自体またはボタンを保持するコンポーネントのいずれかのアフターレンダリングイベントを使用して行う必要があります。

APIコードボックスの1つで直接実行できる例

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    defaults: {
        xtype: 'button'   
    },
    items   : [
        {
            text: 'Next',
            action: 'next'
        },
        {
            text: 'Prev',
            action: 'prev'
        },
        {
            text: 'Cancel',
            action: 'cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=next]').focus(false, 100);  
        }
    }
});

コメントに答えるために編集してください：

与えられた情報に基づいて、buttonsconfigプロパティを使用してボタンを配置することをお勧めします。あなたの場合、コンビニエンスボタン配列の代わりにdocketedItems配列を使用することをお勧めします。次のことを試してください。

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        {
            text:'Back',
            id:'backBtn',
            hidden:true,
            autoHeight:true,
            action: 'Back'
        },
        {
            text:'Next',
            id:'nextBtn',
            autoHeight:true,
            hidden:false,
            action: 'Next'
        },
        {
            text:'Finish',
            id:'finishBtn',
            autoHeight:true,
            hidden:false,  // Comments below line if you want finished button on each panel.
            //hidden:true,
            action: 'Finish'
        },
        {
            text:'Cancel',
            id:'cancelBtn',
            autoHeight:true,
            hidden:false,
            action: 'Cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=Next]').focus(false, 100);  
        }
    }
}]
于 2012-09-05T09:44:16.017 に答える
1

ええ、@ sraが言うように、次のようなものを使用してください：

Ext.getCmp('IdOfNextButton').focus();

または、フォームから、IDに依存するのではなく、up/downメソッドの1つを使用して特定のクラスを介してフォームを検索することをお勧めします。

于 2012-09-05T09:50:30.900 に答える
1

使用できる場合は、Ext.window.WindowのdefaultFocus構成を使用することをお勧めします。ドキュメントから：

defaultFocus：String / Number / Ext.Component

このウィンドウがフォーカスされているときにフォーカスを受け取るコンポーネントを指定します。

これは次のいずれかです。

  • フッターボタンのインデックス。
  • 子孫コンポーネントのIDまたはExt.AbstractComponent.itemId。
  • コンポーネント。

利用可能：4.0.0

于 2016-01-20T14:19:22.697 に答える