PDA

View Full Version : Scroll list wrapper



r4nd7263
21 Jul 2011, 7:27 AM
I want a list with some margin, round corners and a solid border. When I touch scroll, it should scroll the entire panel (including margin area, list and border).

I figure I needed a wrapper panel like



var list = new Ext.List({
itemTpl : '{someText}',
store : store,
cls : 'list'
})

var wrapperPanel = new Ext.Panel({
items :
[list],
cls : 'contentPanel'
})

var contentPanel = new Ext.Panel({
items : [wrapperPanel],
})

new Ext.Panel({
fullscreen : true,
layout : 'fit',
items : [contentPanel],
dockedItems : [topToolbar]
})
CSS:


.contentPanel {
margin: 10px;
}
.list {
border: 1px solid black;
border-radius: 15px;
}
This yields the correct margin and border, but scrolling still happens on List (inside border), not on contentPanel (outside border). Could someone point me in the right direction?

r4nd7263
21 Jul 2011, 7:38 AM
Setting

scroll : 'vertical' on contentPanel
scroll : false on list

did the trick. Now I wonder if there is easier way.

jjerome
21 Jul 2011, 8:12 AM
One thing is you don't really need a wrapper panel unless you want to add a toolbar on top of the list. just put the list in the content panel. That should clean it up a bit.

var list = new Ext.List({
itemTpl : '{someText}',
store : store,
scroll : false,
cls : 'list'
})

var contentPanel = new Ext.Panel({
items :
[list],
scroll : 'vertical'
})

new Ext.Panel({
fullscreen : true,
layout : 'fit',
items : [contentPanel],
dockedItems : [topToolbar]
})