6

タブパネルの各タブには、固定位置に 1 つのフローティング パネルがあります。タブを切り替えるときは、対応するフローティング パネルを前面に移動する必要があります。ただし、tabchange イベントは初回のみ発生します。タブをクリックしたときに、このタブチェンジまたは他の同様のイベントをキャッチするにはどうすればよいですか?

アレクセイ、より具体的な質問を含む私のサンプルコードは次のとおりです。

Ext.onReady(function() {
    panel1 = Ext.create('Ext.panel.Panel', {
        title: 'title1', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title1"); 
        }, scope: this, single: true } }
    });
    panel2 = Ext.create('Ext.panel.Panel', {
        title: 'title2', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title2"); 
        }, scope: this, single: true } }
    });
    panel3 = Ext.create('Ext.panel.Panel', {
        title: 'title3', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title3"); 
        }, scope: this, single: true } }
    });
    var tabpanel = Ext.createWidget('tabpanel', {
        renderTo: document.body,
        activeTab: 0,
        width: 800, height: 50, plain: true,
        items: [panel1, panel2, panel3],
        listeners: {
            'tabchange': { fn: function() {
                 console.log("tabchange");
            }, scope: this, single: true }
        }
    });
});

「tabchange」メッセージは 1 回だけ出力されます。私が本当に望んでいるのは、タブをクリックするたびに「beforeshow on ...」というメッセージを表示することです。

レオ、あなたは男です！私のコードの問題は「fn」であることが判明しました。次のコードは、「fn」、「scope」、および「single」を削除することで完全に機能します。理由はわかりませんが。誰でも説明できますか？

Ext.onReady(function() {
    panel1 = Ext.create('Ext.panel.Panel', {
      title: 'title1', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title1"); } }
    });

    panel2 = Ext.create('Ext.panel.Panel', {
      title: 'title2', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title2"); } }
    });

    panel3 = Ext.create('Ext.panel.Panel', {
      title: 'title3', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title3"); } }
    });

  var tabpanel = Ext.createWidget('tabpanel', {
    renderTo: document.body,
    activeTab: 0,
    width: 800,
    height: 50,
    plain: true,
    items: [panel1, panel2, panel3],
    listeners: {
        'tabchange': function() {
             console.log("tabchange");
        }
    }
  });
});
4

2 に答える 2

8

イベントタブチェンジに機能をつけてください

Ext.onReady(function () {
    panel1 = Ext.create('Ext.panel.Panel', {
        title: 'title1'


    });
    panel2 = Ext.create('Ext.panel.Panel', {
        title: 'title2'

    });
    panel3 = Ext.create('Ext.panel.Panel', {
        title: 'title3'

    });
    var tabpanel = Ext.createWidget('tabpanel', {
        renderTo: document.body,
        activeTab: 0,
        width: 800,
        height: 50,
        plain: true,
        items: [panel1, panel2, panel3],
        listeners: {
            'tabchange': function (tabPanel, tab) {
                console.log(tabPanel.id + ' ' + tab.id);
            }
        }
    });
});

ライブデモはこちら

于 2013-02-01T16:17:31.057 に答える
1

タブの変更後に表示されているパネルで beforeshow イベントを使用してみることができます

于 2013-01-31T21:52:53.973 に答える