2

所以过去一周我一直在到处搜索，但我找不到让两个“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。

现在基本上我想要的是。这两个选项卡面板都有滚动条，所以我希望每当我滚动一个选项卡面板时，另一个选项卡面板会自动随之滚动。

甚至可能吗？

谢谢安迪

4

2 回答 2

0

简短的回答，应该是...

您需要访问您感兴趣的特定容器的滚动项。

我将开始调查以下内容：

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

我知道容器定义了滚动条，但我认为标签面板没有。因此，必须将这种侦听器添加到每个项目中（或者该项目可能会冒泡事件，但未经测试）。

（当然，一旦您可以捕获滚动事件，将另一个面板设置为相同的偏移量就不难了）

希望这至少能给你一个前进的方向。

于 2012-09-12T18:48:56.420 回答
0

正如@zelexir 所提到的，您想要查看滚动条。这是我的示例代码http://jsfiddle.net/YgTuc/1/的一个小提琴，这适用于两个面板，但对于 TabPanel 中的面板应该是一样的。

于 2012-09-13T14:49:30.060 回答