1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    52
    Vote Rating
    3
    aghextjs is on a distinguished road

      0  

    Question [CLOSED] Buttons in tabpanel tbar are spacing out instead of left aligning

    [CLOSED] Buttons in tabpanel tbar are spacing out instead of left aligning


    Hi-

    I have a tabpanel inside of panel that is using the FitToParent plugin. I added some buttons to the tbar on the first tab in my tabpanel and for some reason they are spacing out evenly instead of being left aligned. It actually doesn't matter what buttonAlign I set, they always space evenly. I'd like to debug this b/c I think there may be a css issue going on, but I'm not even sure where to put that first breakpoint.

    To give you an idea, here's what it looks like:
    buttons.png

    And here's my code, paired down a little bit. I don't think I'm doing anything funny, but maybe I've got some layouts wrong...

    PHP Code:
    Ext.onReady(function(){
        
    Ext.QuickTips.init();
        
        var 
    tab1 = {
            
    title 'Tab1',
            
    id'simpleRolesTab',
            
    layout'hbox',
            
    defaults : {
                
    flex 1//auto stretch
                
    margins:'0 0 0 0'
            
    }, 
            
    layoutConfig : {padding'5',align 'stretch'},        
            
    items : [
                {
                    
    html'here is tab 1'
                
    }
            ],
            
    tbar : {
                
    buttonAlign'left',
                
    items: [
                {
                    
    text'Save',
                    
    iconCls'btn-save',
                    
    handlerdoSave
                
    },
                {
                    
    text'Undo Changes',
                    
    iconCls'btn-cancel'
                
    }
            ]}
            
        };

        var 
    testPanel = new Ext.Panel({
            
    title 'Role Configuration',
            
    collapsible false,
            
    renderTo 'rolesdiv',
            
    layout'border',
            
    plugins: [
                new 
    Ext.ux.FitToParent({
                    
    parent'rolesdiv',
                    
    offsets: [050]
                })
            ],
            
    items : [
                {
                    
    region 'center',
                    
    layout'fit',
                    
    items : [
                        {
                            
    xtype'tabpanel',
                            
    activeTab0,
                            
    items : [
                                
    tab1
                            
    ]
                        }
                    ]
                }
            ]
        });
        
    }); 
    A second pair of eyes or a helpful hint on where to set debugger breakpoints much appreciated!

    thanks,
    Annie
    Last edited by aghextjs; 2 Aug 2010 at 7:30 AM. Reason: closing

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    52
    Vote Rating
    3
    aghextjs is on a distinguished road

      0  

    Default


    My hunch was correct, turned out to be a CSS problem. The product I'm working on has a CSS reset type file that sets the TABLE tag to have width:100%. This forced some of the generated HTML for the buttons to have width:100% which made them as wide as the panel.

Similar Threads

  1. Items in tbar not spacing correctly?
    By oc3068 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 31 Aug 2009, 12:05 PM
  2. tabpanel with left & right aligned buttons?
    By gmoniey in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 8 Apr 2009, 6:28 PM
  3. Aligning text left in message boxes
    By dbinaz in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 26 Oct 2007, 9:28 AM

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar