1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    80
    Answers
    1
    Vote Rating
    1
    Anthony.Hall is on a distinguished road

      0  

    Default Unanswered: aligning buttons right using tbfil

    Unanswered: aligning buttons right using tbfil


    I have the following. I would like the first item 'create' to be aligned to the right.

    I've read about using 'tbfill' to align. But i'm unsure how to use this with my implementation.

    Code:
                       dockedItems:[                        {
                                xtype:'toolbar',
                                flex:1,
                                dock:'top',
                                items:[
                                    {
    
    
                                        xtype:'button',
                                        id: 'ContactCreate',
                                        name: 'ContactCreate',
                                        text:'Create',
                                        action:'create',
                                        align: 'right',
                                        style: 'float:right',
                                        width:'100',
                                        iconCls:'icon-add'
    
    
                                    },
                                    {
                                        xtype:'button',
                                        id: 'ContactSave',
                                        name: 'ContactSave',
                                        text:'Save',
                                        action:'save',
                                        width:'100',
                                        iconCls:'icon-save'
                                    },
    
    
                                    {
                                        xtype:'button',
                                        id: 'ContactDelete',
                                        name: 'ContactDelete',
                                        text:'Delete',
                                        action:'delete',
                                        width:'100',
                                        iconCls:'icon-delete'
                                    }
    
    
                                ]
                            }
                        ],

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi

    you can see this link :- http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Fill
    for how to use tbfill
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    80
    Answers
    1
    Vote Rating
    1
    Anthony.Hall is on a distinguished road

      0  

    Default


    I was thinking that you add the tbfill to an actual item. Here is a working example.

    Code:
                        dockedItems:[

    Code:
                            {
                                xtype:'toolbar',
                                flex:1,
                                dock:'top',
                                items:[
                                    {
                                        xtype:'button',
                                        id: 'ContactSave',
                                        name: 'ContactSave',
                                        text:'Save',
                                        action:'save',
                                        width:'100',
                                        iconCls:'icon-save'
                                    },
                                    {
                                        xtype:'button',
                                        id: 'ContactDelete',
                                        name: 'ContactDelete',
                                        text:'Delete',
                                        action:'delete',
                                        width:'100',
                                        iconCls:'icon-delete'
                                    },
                                    { xtype: 'tbfill' },
                                    {
    
    
                                        xtype:'button',
                                        id: 'ContactCreate',
                                        name: 'ContactCreate',
                                        text:'Create',
                                        action:'create',
                                        width:'100',
                                        iconCls:'icon-add'
    
    
                                    }
    
    
    
    
                                ]
                            }
    
    ],


Thread Participants: 1