一起滾動兩個ext.TabPanels

Question

因此，過去一周我一直在各處搜索，但找不到找到使兩個“ Ext.TabPanel”一起滾動的方法。

我正在使此頁面具有Ext.Panel，其中包含兩項：

var MyBorderPanel = new Ext.Panel({
    layout: 'border',
    renderTo: 'command_display',
    cls: 'auto-width-tab-strip',
    height:800,
    items: [
    {
        region: 'west',
        title: 'item1: <?=ui::getURLField("item1")?>',
        split: true,
        width: 500,
        minSize: 100,
        maxSize: 900,
        layout: 'fit', // specify layout manager for items
        items:   // this TabPanel is wrapped by another Panel
        baseTab
    },
    {
        region: 'center',
        title: 'item2 : <?=ui::getURLField("item2")?>',
        split: true,
        margins: '0 0 0 0',
        layout: 'fit', // specify layout manager for items
        items:            // this TabPanel is wrapped by another Panel
        compareTab
    }
]
});

這些項目：baseTab和compareTab的描述如下：

var baseTab = new Ext.TabPanel({
    border: false, // already wrapped so don't add another border
    activeTab: 0, // second tab initially active
    items: [
    <?php
        $uihelper->perform("InitItem1Iteration");
        $comma = true;
        while($uihelper->hasNext("Item1Iteration"))
        {
            $uihelper->next("Item1Iteration");
    ?>      
    <?=(!$comma?",":"")?>
    {
        title: 'some php code',
        id: 'some php code',
        autoScroll: true,
        contentEl: 'some php code',
    }
    <?php 
    $comma = false;
    } ?>
    ]
});

Item2與之類似。

現在基本上我想要的是。 這兩個選項卡面板都有滾動條，因此我希望每當滾動一個tabPanel時，另一個選項卡面板都會自動滾動。

可能嗎？

謝謝安迪

Answer 1

簡短的回答，應該是...

您需要訪問您感興趣的特定容器的滾動項。

我將開始調查以下方面的內容：

listeners: {
    scroller: {
        scroll: function(scroller, offset) {
            console.log(scroller, offset);
        }
    }
}

我知道容器已定義了滾動條，但我不認為TabPanel可以。 因此，必須將此類偵聽器添加到每個項目中（否則該項目可能會使事件冒泡，但未經測試）。

（當然，一旦捕捉到滾動事件，將另一個面板設置為相同的偏移量就不會很困難）

希望這至少能給您一個前進的方向。

Answer 2

如@zelexir所述，您想查看滾動條。 這是我的示例代碼http://jsfiddle.net/YgTuc/1/的小提琴。這適用於兩個面板，但對於TabPanel中的面板應該工作相同。