1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    27
    Vote Rating
    0
    sanjaybh is on a distinguished road

      0  

    Default Scrollbar to the ExtJS panel ?

    Scrollbar to the ExtJS panel ?


    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
    Last edited by mystix; 30 Dec 2008 at 6:51 AM. Reason: moved to 2.x Help from Examples

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    27
    Vote Rating
    0
    sanjaybh is on a distinguished road

      0  

    Question Re: Scrollbar to the ExtJS panel?

    Re: Scrollbar to the ExtJS panel?


    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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    27
    Vote Rating
    0
    sanjaybh is on a distinguished road

      0  

    Default RE: Scrollbar to the ExtJS panel ?

    RE: Scrollbar to the ExtJS panel ?


    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

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    Try using:
    Code:
    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!)

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    27
    Vote Rating
    0
    sanjaybh is on a distinguished road

      0  

    Default Scrollbar to the ExtJS panel ?

    Scrollbar to the ExtJS panel ?


    Awesome, it worked..

    thanks a lot man

  8. #8
    Sencha User
    Join Date
    Aug 2008
    Posts
    27
    Vote Rating
    0
    sanjaybh is on a distinguished road

      0  

    Default


    It would be gr8 if you can explain me how it works,

    CSBfleXcroll.defer(1, window, [c.body.dom]);

    My example is working now, but if i need to insert grid in this panel and want the grid to have the same theme applied it dosent work.


    thanks.

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You can only apply the styled scrollbars after the component has been set to it's final size. BoxComponent (and all it's descendants) gets its final size in the afterRender method.
    Unfortunately, there is no 'afterrender' event, only a 'render' event. You can't initialize the scrollbars in the 'render' event because it fires to soon, so you have 2 options:
    1. Use the 'render' event, but delay the creating of the styled scrollbars (this example).
    2. Use the 'afterlayout' event (but you need to add single:true, because it will fire on every resize).

    Come to think of it, the second method would be even better (you could even add extra code to support resizing).

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    2.2.1 and 3.0 have an afterrender event. Bear that in mind when they are released.