Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    143
    Answers
    5
    Vote Rating
    0
    rockinthesixstring is on a distinguished road

      0  

    Default Answered: How can I get these three buttons to centered and evenly spaced within the container?

    Answered: How can I get these three buttons to centered and evenly spaced within the container?


    Just wondering if anyone can let me know how I can get these three buttons to centered and evenly spaced within the container?
    Code:
    Ext.define('rpc.view.home.indexView', {    extend: 'Ext.Panel',
        alias: 'widget.homeView',
        config: {
           items: [{
               xtype: 'container',
               layout: { 
                   type: 'vbox',
                   pack: 'center'
               },
               defaults: {
                   xtype: 'button',
                   margin: '10 10 0 10'
               },
               items: [{
                   text: 'Videos',
                   cls: 'x-button-quicknav'
               }, {
                   text: 'Events',
                   cls: 'x-button-quicknav'
               }, {
                   text: 'Sites',
                   cls: 'x-button-quicknav'
               }]
            }]
        },
        initialize: function () {
            console.log('rpc.view.home.index ~ initialize');
        }
    });

  2. You're right, this works equally well

    Code:
               xtype: 'container',
               layout: {
                   type: 'hbox',
                   pack: 'center'
               },
               defaults: {
                   xtype: 'button',
                   ui: 'plain',
                   flex: 1,
                   cls: 'x-button-rpc'
               },
               items: [{
                   text: 'Videos'
               }, {
                   text: 'Events'
               }, {
                   text: 'Sites'
               }]

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    jurrie is on a distinguished road

      0  

    Default


    We use a toolbar with spacers for our button bar which works out great, f.e.:

    Code:
    {    xtype: 'toolbar',
        ui: 'light',
        style: 'background: #444',
        defaults: {
            iconMask: true,
            iconAlign: 'center',
            pack: 'justify',
            badgeCls: 'x-badge badge-left',
            style: 'font-size: .8em',
            ui: 'plain'
        },
        items: [
            { xtype: 'spacer' },
            { iconCls: 'video' },
            { xtype: 'spacer' },
            { iconCls: 'photo1' },
            { xtype: 'spacer' },
            { iconCls: 'locate4' },
            { xtype: 'spacer' },
            { iconCls: 'chat3' },
            { xtype: 'spacer' },
            { iconCls: 'nodes2' },
            { xtype: 'spacer' }
        ]
    }
    Hope this helps.

  4. #3
    Sencha User
    Join Date
    May 2011
    Posts
    143
    Answers
    5
    Vote Rating
    0
    rockinthesixstring is on a distinguished road

      0  

    Default


    This got me most of the way there. I really didn't want to use a "toolbar" simply because of the theming... but I just cheated and set it to a non-useful theme "none"

    Code:
    Ext.define('rpc.view.home.indexView', {    extend: 'Ext.Panel',
        alias: 'widget.home-indexView',
        config: {
           items: [{
               xtype: 'toolbar',
               ui: 'none',
               defaults: {
                   iconAlign: 'center',
                   iconMask: true,
                   pack: 'justify',
                   ui: 'plain',
                   style: 'border: 1px solid #c4c4c4; background-color: White;',
                   flex: 1
               },
               items: [{
                   text: 'Videos'
               }, {
                   text: 'Events'
               }, {
                   text: 'Sites'
               }]
            }]
        },
        initialize: function () {
            console.log('rpc.view.home.index ~ initialize');
        }
    });

  5. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    You can just use a container with an hbox layout and pack center.

    Code:
    config: {
        layout: {
            type: 'hbox',
            pack: 'center'
        }
    }

  6. #5
    Sencha User
    Join Date
    May 2011
    Posts
    143
    Answers
    5
    Vote Rating
    0
    rockinthesixstring is on a distinguished road

      0  

    Default


    You're right, this works equally well

    Code:
               xtype: 'container',
               layout: {
                   type: 'hbox',
                   pack: 'center'
               },
               defaults: {
                   xtype: 'button',
                   ui: 'plain',
                   flex: 1,
                   cls: 'x-button-rpc'
               },
               items: [{
                   text: 'Videos'
               }, {
                   text: 'Events'
               }, {
                   text: 'Sites'
               }]

Thread Participants: 2