Scroll “Sencha”；卡面板+；“数据视图”；使滚动变得不可能

我的滚动问题让我发疯。这只发生在卡片布局上，我尝试了所有可能的“滚动”值组合，但没有成功

以下是我的情况：

• 我有一个应用程序，其中一个选项卡面板连接到视口
• 在每个选项卡内，我需要一个卡片布局面板，这样我就可以在每个选项卡上独立导航（每个选项卡是不同的部分）
• 问题是：滚动可以使用简单的元素，比如HTMLdiv，但是如果我试图获取Ext.DataView或Ext.List组件并滚动，它就不能正常工作
• 有趣的是：如果我抓取一个数据视图（或列表），移动鼠标一点并尝试滚动，它就可以工作了

项目已联机，您可以检查：

故障卡的代码如下所示：

homeCardStart.js

Ext.regModel('testModel', {
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'birthday',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }]
});

var testStore = new Ext.data.Store({
    model: 'testModel',
    method: 'GET',
    proxy: {
        url: 'res/recSample.json',
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'items',
            record: 'people',
        }
    }
});

var testData = new Ext.DataView({
    tpl: '<tpl for="."><div class="person">{name}<br>{birthday}<br>{description}</div></tpl></div>',
    store: testStore,
    itemSelector: 'div.person',
    scroll: false,
    width: 350,
    autoHeight: true,
    margin: 20,
    style: 'border:2px solid magenta'
});

testData.on('render', function () {
    testData.store.load();
}, this);

App.views.HomeCardStart = Ext.extend(Ext.Panel, {
    title: 'Home Start',
    iconCls: 'home',
    layout: 'vbox',
    scroll: 'vertical',
    style: 'background-color: silver',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        title: 'Home Start'
    }],
    items: [{
        html: 'Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>',
        style: 'border:2px solid green',
        width: 350,
        autoHeight: true
    },
    testData]
});

Ext.reg('homeCardStart', App.views.HomeCardStart);

HomeCard.js：

App.views.HomeCard = Ext.extend(Ext.Panel, {
    title: 'Home',
    iconCls: 'home',
    layout: 'card',
    width: '100%',
    height: '100%',
    style: 'background-color: green;',


    items: [{
        xtype: 'homeCardStart'
    }, {
        xtype: 'panel',
        title: 'Another card',
        style: 'background-color: pink'
    }]
});


Ext.reg('homeCard', App.views.HomeCard);

会发生什么？是虫子吗？它只发生在卡面板上（同样的错误发生在没有主选项卡面板的情况下）

谢谢！

---

Leo

您遇到的问题是嵌套了可滚动面板。在选项卡面板中，您可以设置

默认值

以始终向每张卡添加

滚动

，然后在该卡中，数据视图也可以滚动

要解决此问题，您应该关闭dataview上的滚动，或者删除卡项目上的滚动。你不能两者兼得

App.views.HomeCard = Ext.extend(Ext.Panel, {
    title: 'Home',
    iconCls: 'home',
    layout: 'card',
    width: '100%',
    height: '100%',
    style: 'background-color: green;',


    items: [{
        xtype: 'homeCardStart'
    }, {
        xtype: 'panel',
        title: 'Another card',
        style: 'background-color: pink'
    }]
});


Ext.reg('homeCard', App.views.HomeCard);