Scrollable panel [Archive]

gatakka

18 Aug 2009, 2:32 AM

Hello, i have issue whit scroll in panels.
i want to have a panel, this panel hase a tbar and another panel. The last panel must hase a scroll bars if content is bigger.
i try different things, but alwajs i do not have scroll bars. No difference if I use autoScroll:true.
here is a litle example

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'fit',
items: new A3p.Main()
})
});
A3p.Main = function(config){
Ext.apply(this, config);
A3p.Main.superclass.constructor.call(this);
};
Ext.extend(A3p.Main,Ext.Panel, {

border: false,
layout:'fit',
initComponent: function() {
this.initLayout();
A3p.Main.superclass.initComponent.call(this);
}

initLayout: function() {
this.items = [{
tbar:[{
text:'adad'
}],
xtype:'panel',
layout:'table',
autoScroll:true,
defaults: {
bodyStyle:'padding:20px'
},
layoutConfig: {
columns: 2
},
items: [{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
},{
html: 'Cell A content'

},{
html: 'Cell B content'

},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
}]
}];
}
});

i never see scroll bars. I try whit different layout combinations, but result is the same.
Can someone explay me what i do wrong, maybe i do not understands layouts completly.

Animal

18 Aug 2009, 2:41 AM

You are embedding one big Panel inside your Panel which CONTAINS all those little Panels!

(Though why you are creating dozens of little Panels is beyond me! Panels????????)

gatakka

18 Aug 2009, 2:49 AM

I use this table layout whit all panels jut to fill space for testing. This will not be the case in my application. I just want one panel, (because i will add it on different places in my project) that has tbar and scrolling content inside. Content will be Ext widgets or some HTML. I want this content to be scrollable if is bigger.

Animal

18 Aug 2009, 2:56 AM

Yes.

One Panel.

Not One Panel containing One Panel which then contains all your little Panels!

Read your code!

gatakka

18 Aug 2009, 2:57 AM

i just found something, if i set the height to some value it works.
But how i can know the height of the panel?

gatakka

18 Aug 2009, 3:00 AM

Not One Panel containing One Panel which then contains all your little Panels!
And when i add it somewhere scrolls disapear. If is only one panel it works, but i want to put it insede other panels.

Animal

18 Aug 2009, 3:08 AM

You don't understand do you?

You have not created a Panel which contains a series of Panels.

You have created a Panel which contains a Panel which contains a series of Panels.

Can you not conceive the difference between these two situations?

Condor

18 Aug 2009, 3:17 AM

Maybe an example will clear things up for you:
1. Your constructor should pass the config options to the superclass constructor and not apply them itself.
2. Any custom config options (including the items) can be applied in the constructor. No need to use initComponent for that.
3. The layout:'fit' panel isn't needed. A3p.Main can be layout:'table' itself.
4. Using a Panel to display HTML is a lot of overhead. Use BoxComponents instead.

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'fit',
items: new A3p.Main()
})
});
A3p.Main = function(config){
A3p.Main.superclass.constructor.call(this, Ext.apply(this.initLayout(), config));
};
Ext.extend(A3p.Main, Ext.Panel, {
initLayout: function() {
return {
xtype: 'panel',
tbar:[{
text: 'adad'
}],
layout: 'table',
autoScroll: true,
defaultType: 'box',
defaults: {
style: 'padding:20px;'
},
layoutConfig: {
columns: 2
},
items: [{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
},{
autoEl: {html: 'Cell A content'}
},{
autoEl: {html: 'Cell B content'}
},{
autoEl: {html: 'Cell C content'},
cellCls: 'highlight'
},{
autoEl: {html: 'Cell D content'}
}]
};
}
});

gatakka

18 Aug 2009, 3:40 AM

Thank you @Animal and @Condor.
Now i understand it :)