Scrollbar to the ExtJS panel ?

[sanjaybh]

Hi,

I am having some requirement to make my ext panel a custom panel with the scrollbars that match the current theme of the application, i have used this http://www.hesido.com/web.php?page=customscrollbar

link but didn't get my requirement fulfilled. My Panel has title but i need to scrollbars to the contents inside the panel not the title.

I don't have enough knowledge abt ExtJS, still then i am trying to do some home work.

I would request you to help me in this regard if possible for you, or provide me some helping url's that will guide me in this approach.


regards,
sanjay

[Condor]

This should probably work:

var panel = new Ext.Panel({
  ...
  autoScroll:true,
  listeners: {
    render: function(c){
      CSBfleXcroll(c.body.dom.id);
    }
  }
});

[sanjaybh]

thanks for the quick response, but i doubt that it works, attached is the code of the panel that i am using, please have a look and let me know if i am doing things right. Could you please rectify my mistake and make this example working.

Error:- undefined CSBfleXcroll


thanks in advance.
Sanjay

[Condor]

I don't get an undefined error in your code. The code actually works, but it doesn't display very well, because you didn't include a stylesheet for the custom scroller.

[sanjaybh]

Sorry if i forgot to mention it earlier, my requirement is

consider a div in an html page, render an extjs panel into it, the scrollbars need to be themed properly as then can match the site themes but the title of the extjs panel should not scroll.

thanks
Sanjay

[Condor]

OK, the problem is that the 'html' config option gets applied AFTER the render method.

Try using:

var myExtJSPanel_1 = new Ext.Panel({
	title:'Title of the panel',
	id:'myExtJSPanel_2',
	width:400,
	height:400,
	listeners: {
		render: function(c){
			CSBfleXcroll.defer(1, window, [c.body.dom]);
		}
	},
	renderTo:'myExtJSPanel_1',
	html:'...'	
});

(I removed the cls, because it was causing the panel to scroll instead of the body!)

[vmacias1216]

Yo uso este codigo y me esta funcionando.....si alguien quiere opinar?????

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'Libs/resources/images/default/s.gif';
Ext.override(Ext.Component, {
afterRender: function() {
if (Ext.isDefined(this.body)) {
CSBfleXcroll.defer(1, window, [this.body.dom]);
}
}
});