1. #1
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default Right aline a button in a toolbar

    Right aline a button in a toolbar


    How do I right align a button in a toolbar? Below is my script:

    var toolbar = { xtype: 'toolbar', items: [{ xtype: 'button', ui: 'mask', iconCls: 'settings'}] };

    I need the title to come up centered and correctly formatted, hence the toolbar. I tried inserting the button as a right docked item, but apparently docked items don't appear in toolbars.

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    try this:

    Code:
    var toolbar = { xtype: 'toolbar', items: [{xtype: 'spacer'}, { xtype: 'button', ui: 'mask', iconCls: 'settings'}] };

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    btw. Icons can appear in DockedItem.

    Read this thread: http://www.sencha.com/forum/showthre...-in-dockedItem

  4. #4
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    Adding a spacer did it, thanks.When I said docked item not showing up, I meant with the following code:
    Code:
    { xtype: 'toolbar', dockedItems: [{ xtype: 'button', ui: 'mask', iconCls: 'settings', dock: 'right', stretch: false, align: 'center'}] }

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    So far I have only managed to get the following icons working inside dockItems:

    Code:
    { iconCls: 'action' },
    { iconCls: 'add' },
    { iconCls: 'attachment' },
    { iconCls: 'bookmarks' },
    { iconCls: 'bolt' },
    { iconCls: 'chat' },
    { iconCls: 'compose' },
    { iconCls: 'delete' },
    { iconCls: 'home' },
    { iconCls: 'locate' },
    { iconCls: 'maps' },
    { iconCls: 'organize' },
    { iconCls: 'refresh' },
    { iconCls: 'reply' },
    { iconCls: 'search' },
    { iconCls: 'tag' },
    { iconCls: 'trash' }

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    7
    TommyMaintz will become famous soon enough

      0  

    Default


    There were some incorrect rules in our CSS. We are currently uploading a new release of the beta that will fix this.

  7. #7
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    Using .91, no icons show up in the following screen:

    Code:
    Ext.setup({onReady: function () {
    new Ext.Panel({ fullscreen: true,
      items: [{ xtype: 'toolbar', dockedItems: [{ xtype: 'button', ui: 'mask', iconCls: 'settings', dock: 'right', stretch: false, align: 'center'}]}]
    });
    new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom' }, defaults: { ui: 'mask' },
      items: [{ iconCls: 'reply', title: 'reply' }, { iconCls: 'chat', title: 'chat' }, { iconCls: 'chat', title: 'search'}]
    });
    }});
    


  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    7
    TommyMaintz will become famous soon enough

      0  

    Default


    I dont know if this is an error somewhere in the documentation, but we dont have reply nor chat icons for tabs.
    Looking at the css these are the available tab iconCls options.
    Code:
    bookmarks
    download
    favorites
    info
    more
    search
    time
    user
    team
    settings
    The settings icon works for me on the button in the toolbar. Note that docking the button to the right of the toolbar is not the preferred solution. We only did this in the guide because we were adding it to a TabBar, and we didnt want to button to be part of the items (and thus tabs) collection.

    P.s. You might want to add some spacing to make your code more readable. E.g.

    Code:
    new Ext.Panel({ 
        fullscreen: true,
        items: [{
            xtype: 'toolbar',
            items: [{xtype: 'spacer'}, {
                xtype: 'button', 
                ui: 'mask', 
                iconCls: 'settings'
            }]
        }]
    });
                         
    new Ext.TabPanel({
        fullscreen: true, 
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        }, 
        items: [...your tabs here...]
    });

  9. #9
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    Default


    Kitchen sink > user interface > icon demo in .91:

    iconCls:
    'chat'

    And a whole bunch more not in your list

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    7
    TommyMaintz will become famous soon enough

      0  

    Default


    There are two sets of icons. One is for buttons inside a toolbar, and the other is for tabs in a tabbar. The ones I listed are all the available icons specifically for tabs. We should probably make this more clear in the example and documentation.
    I think the reason that they can not be shared is because tab icons are a different size then toolbar button icons. It do agree though that it would be nice if you could use every iconCls on both buttons and tabs.

Similar Threads

  1. Updating image on toolbar button and paging toolbar issues
    By Jangla in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Jul 2009, 1:21 AM
  2. insert button into toolbar wont update the toolbar.items
    By Dr. Flink in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Feb 2009, 11:13 PM

Thread Participants: 2

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