Sencha「卡面板+數據視圖」讓滾動變得不可能

我有一個滾動問題讓我瘋狂。它只發生在卡片佈局上，我嘗試了所有可能的「滾動」值的組合，並取得成功。Sencha「卡面板+數據視圖」讓滾動變得不可能

這裏是我的情況：

我有附加標籤面板的應用視口
每個選項卡里面，我需要一個卡片佈局面板，所以我可以獨立每個選項卡上導航（每標籤是一個不同的部分）
的問題是：滾動工作與像HTML div的簡單元素，但如果我試圖抓住一個Ext.DataView或Ext.List組件和滾動，它不能正常工作
有趣的事情：如果我抓住一個DataView（或列表），將鼠標移動一點b它並嘗試滾動，它的工作原理

爲陷入困境卡代碼是在這裏：

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

會發生什麼情況？這是一個錯誤嗎？它只發生在卡面板（同樣的錯誤發生沒有外面的主選項卡面板）

謝謝！獅子座

來源

2012-02-11 leoitsme

您遇到的問題是您嵌套可滾動面板。在您的標籤面板中，您將defaults設置爲始終將scroll添加到每張卡片，然後在該卡片內，數據視圖也可以滾動。

要解決該問題，您應該在數據視圖中關閉滾動，或者移除卡片項目的滾動。你不能擁有兩個。

來源

2012-02-15 02:16:22 rdougan

Sencha「卡面板+數據視圖」讓滾動變得不可能

回答

相關問題