0
我有一个滚动问题让我疯狂。它只发生在卡片布局上,我尝试了所有可能的“滚动”值的组合,并取得成功。Sencha“卡面板+数据视图”让滚动变得不可能
这里是我的情况:
- 我有附加标签面板的应用视口
- 每个选项卡里面,我需要一个卡片布局面板,所以我可以独立每个选项卡上导航(每标签是一个不同的部分)
- 的问题是:滚动工作与像HTML div的简单元素,但如果我试图抓住一个Ext.DataView或Ext.List组件和滚动,它不能正常工作
- 有趣的事情:如果我抓住一个DataView(或列表),将鼠标移动一点b它并尝试滚动,它的工作原理
该项目是在线为您检查:http://gaeti.com/scrollTest/
为陷入困境卡代码是在这里:
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);
会发生什么情况?这是一个错误吗?它只发生在卡面板(同样的错误发生没有外面的主选项卡面板)
谢谢! 狮子座