Question

我有一个滚动问题让我发疯。它只发生在卡片布局上，我尝试了所有可能的“滚动”值组合，并取得了成功。

以下是我的情况：

我有一个应用程序，其中一个标签面板附加到Viewport
在每个标签页面中，我需要一个卡片布局面板，因此我可以独立浏览每个标签（每个标签是不同的部分）
问题是：滚动适用于像html div这样的简单元素，但如果我尝试抓取Ext.DataView或Ext.List组件并滚动，它就无法正常工作
有趣的事情：如果我抓住DataView（或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);

Viewport.js：

App.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    id: 'mainTabPanel',
    defaults: {
        scroll: 'vertical'
    },
    items: [{
        xtype: 'homeCard',
        id: 'homeCard',
        cls: 'home'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }]
});

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);

会发生什么？这是一个错误吗？它只发生在卡面板上（如果没有主标签面板，则会出现相同的错误）

谢谢！利奥

Answer 1

您遇到的问题是您正在嵌套可滚动面板。在标签面板中，您将defaults设置为始终为每张卡添加scroll，然后在该卡中，数据视图也可以滚动。

要解决此问题，您应该在数据视图上滚动关闭，或者删除卡片项目上的滚动。你不能兼得。

Sencha＆＃34;卡面板+数据视图＆＃34;滚动不可能

1 个答案: