Hybrid View

  1. #1
    Ext User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    cbb is on a distinguished road

      0  

    Post How to center items in Ext.Toolbar

    How to center items in Ext.Toolbar


    Hi,
    Items in toolbar are left by default, use '->' can make them right, but how to make them center?
    My English is so poor. May I had expressed my trouble.

  2. #2
    Sencha User karieanis's Avatar
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    110
    Vote Rating
    1
    karieanis is on a distinguished road

      0  

    Default


    You need to get the toolbar object and wrap a center tag around it. I would suggest putting this code in 'render' listener for your toolbar object.

    eg.
    Code:
    var myToolbar = new Ext.Toolbar(
    {
      //config options
      listeners:
      {
        'render':function(t)
        {
           t.getEl().child("table").wrap({tag:'center'});
        }
      }
    });
    Jeremy Rayner
    Software Engineer

  3. #3
    Ext User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    cbb is on a distinguished road

      0  

    Default


    Hoo, it works very well.
    Thanks!

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

      0  

    Default


    Yep, that will work fine.

    Just a heads up that in 3.0, it won't work as well.

    A 3.0 Toolbar has two tables. One for left aligned Buttons and one for right aligned Buttons.

    Also, a 3.0 Toolbar is a Container, and so will not contain the expected internal DOM structure until it's first layout operation.

    So in 3.0:

    Code:
    myToolbar.on('afterlayout', function(tb){
    	tb.el.child('.x-toolbar-right').remove();
    	var t = tb.el.child('.x-toolbar-left');
    	t.removeClass('x-toolbar-left');
    	t = tb.el.child('.x-toolbar-ct');
    	t.setStyle('width', 'auto');
    	t.wrap({tag: 'center'});
    }, null, {single: true});

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Location
    netherlands
    Posts
    6
    Vote Rating
    0
    phpkunst is on a distinguished road

      0  

    Default


    Hi,
    Yes it works for extjs 3.0 but where is the paging info. Remove is'nt an option for me.
    How can i make a fix for it.

  6. #6
    Ext User
    Join Date
    Oct 2007
    Posts
    8
    Vote Rating
    0
    rjackson64840 is on a distinguished road

      0  

    Default


    Thanks for the workaround Animal. Any chance you guys have plans to simplify this via the toolbar config so that buttons can more easily be centered (which is a very common requirement)?

  7. #7
    Ext User
    Join Date
    Jan 2010
    Posts
    19
    Vote Rating
    0
    grandanat is on a distinguished road

      0  

    Default


    A workaround would be to add a spacer between left button and title with width =toolbar width/2 but i'm not able to obtain toolbar width(maybe even is not defined until first layout render) . So what can i do ?

  8. #8
    Sencha User
    Join Date
    Dec 2012
    Posts
    3
    Vote Rating
    0
    yuva_ess is on a distinguished road

      0  

    Default


    How this can be done in 4.0?