Results 1 to 6 of 6

Thread: Adding a Fill component to Toolbar to position button on right side of toolbar

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    54
    Vote Rating
    0
      0  

    Default Answered: Adding a Fill component to Toolbar to position button on right side of toolbar

    Working in Architect 4.x my goal is to position one of my buttons on my tool bar on the far right side while others remain on the left.

    In the Architect 4.2 user guide at https://docs.sencha.com/architect/4....e/layouts.html , there is this paragraph:

    The buttons need a little more work to make them more usable by both the user and the developer. First, align the buttons by adding a Fill component between the Cancel and Previous button and a Spacer of width 20 between the Next and Submit buttons.

    I can't find any such feature (e.g. Fill or Spacer or anything similar) in my toolbox nor any hint of such a thing in any configurations.

    In the end I'll be happy with any clean solution that allows me to position a button on the right of my toolbar, leaving others on the left so I'm open to suggestions generally too.

    Thanks!
    David

  2. Ext.toolbar.Fill.

    In SA look at Views->Toolbar

    It is available with "Classic" theme, don't know with others themes.

  3. #2
    Ext Team Member
    Join Date
    Sep 2017
    Posts
    676
    Answers
    3
    Vote Rating
    -320
      0  

    Default

    Hi there- I have shared this issue with the support team and asked that they reach out to you to provide some assistance. Your patience is greatly appreciated!

    Michele

  4. #3
    Sencha Premium User
    Join Date
    Jan 2014
    Location
    Italy
    Posts
    116
    Answers
    5
    Vote Rating
    13
      0  

    Default

    Ext.toolbar.Fill.

    In SA look at Views->Toolbar

    It is available with "Classic" theme, don't know with others themes.

  5. #4
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    54
    Vote Rating
    0
      0  

    Default

    Thanks so much -- I have to say I'm a bit embarrassed to discover that I missed that! That is exactly what I was looking for.

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    54
    Vote Rating
    0
      0  

    Default

    Michele, thanks much -- I'm good now, many thanks to faireu. I would suggest that the folks maintaining the documentation consider adding a sentence to the Architect guide I referred to above explaining where the fill is.

  7. #6
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    54
    Vote Rating
    0
      0  

    Default

    One last thing -- for the record the resulting .js code looks like this:

    Ext.define('groupTypeEd.view.tbarMetricUnitsLut', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.tbarmetricunitslut',


    requires: [
    'groupTypeEd.view.tbarMetricUnitsLutViewModel',
    'groupTypeEd.view.tbarMetricUnitsLutViewController',
    'Ext.button.Button',
    'Ext.toolbar.Fill'
    ],


    controller: 'tbarmetricunitslut',
    viewModel: {
    type: 'tbarmetricunitslut'
    },


    items: [
    {
    xtype: 'button',
    icon: 'icons/excel16.png',
    listeners: {
    click: 'onExportButtonClick'
    }
    },
    {
    xtype: 'tbfill'
    },
    {
    xtype: 'button',
    text: 'MyButton'
    },
    {
    xtype: 'button',
    text: 'MyButton'
    }
    ]


    });

Similar Threads

  1. Replies: 4
    Last Post: 24 Jan 2017, 6:57 AM
  2. Overflow button position on a Toolbar
    By ghillo in forum Ext: Discussion
    Replies: 5
    Last Post: 6 Oct 2015, 10:45 PM
  3. Replies: 3
    Last Post: 12 Apr 2012, 4:42 AM
  4. Replies: 3
    Last Post: 27 Dec 2011, 8:02 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •