我正在使用sencha touch carousel,我正在使用水平滑动。哪个效果很好。 但在此我正在使用我想垂直滚动的面板(将每个页面滚动到底部)。怎么做?我给出了滚动:每个面板中的“垂直”如下:
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
style:'overflow:auto;' ,
scroll:'vertical',
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
但我无法将面板滚动到底部。哪里出错?
Sencha touch vertical scroll content in a horizontal carousel。根据这个stackoverflow答案,我们可以在水平轮播中垂直滚动子内容,像我这样的问题。但我在这里做同样的事情,我不能滚动。 我的子面板包含vbox和hbox布局。
有人可以回答我的问题吗?
答案 0 :(得分:7)
试试这个,它对我有用,我从sench forum
得到它在面板中设置可滚动配置
scrollable : {
direction : 'vertical',
directionLock : true
}
示例强>
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
scrollable : {
direction : 'vertical',
directionLock : true
},
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
请参阅此fiddle
答案 1 :(得分:0)
编辑:如果您希望面板中的'hbox'可用性,则需要在容器内放置其宽度 如果它需要创建自己的滚动条,它将无法这样做。
您需要的是以不同方式定义滚动:
scrollable: {
direction: 'vertical',
directionLock : true
}
像这样:
var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
items : [
{ xtype: 'panel',
scrollable: {
direction: 'vertical',
directionLock: true
},
html: 'This panel is scrollable!',
items: [{
xtype: 'textfield',
name : 'first',
label: 'First'
},
{
xtype: 'textfield',
name : 'second',
label: 'Second'
},{
xtype: 'textfield',
name : 'third',
label: 'Third'
},{
xtype: 'textfield',
name : 'first1',
label: 'First1'
},
{
xtype: 'textfield',
name : 'second1',
label: 'Second1'
},{
xtype: 'textfield',
name : 'third1',
label: 'Third1'
},{
xtype: 'textfield',
name : 'first12',
label: 'First12'
},
{ xtype: 'panel',
layout: 'hbox',
width: 200,
items: [{
xtype: 'textfield',
name : 'first-box',
label: 'First-box'
},
{
xtype: 'textfield',
name : 'second-box',
label: 'Second-box'
},{
xtype: 'textfield',
name : 'third-box',
label: 'Third-box'
}]
}, {
xtype: 'textfield',
name : 'second12',
label: 'Second12'
},{
xtype: 'textfield',
name : 'third12',
label: 'Third12'
}]
}, {
xtype: 'panel',
scroll:'vertical', // will not work
html: 'This panel is not scrollable!',
}]
});
您可以在sencha docs的任何实时预览中尝试此操作 希望这有帮助