Hybrid View

  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
    96
    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
    96
    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
    96
    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
    Ext User
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    vmacias1216 is on a distinguished road

      0  

    Default


    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]);
    }
    }
    });