Results 1 to 3 of 3

Thread: Custon align in ButtonBar

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    19

    Default Custon align in ButtonBar

    In the ButtonBar of a Windows I would have a custom align: a Status align to left and the buttons align to right.

    This code align all the components to the right:
    Code:
    Status status = new Status();
    status.setAutoWidth(true);
    super.getButtonBar().add(status);
    
    super.setButtonAlign(Style.HorizontalAlignment.RIGHT);
    
    Button saveButton = new Button("Save",
                                   new SelectionListener<ButtonEvent>() {
    
        @Override
        public void componentSelected(ButtonEvent ce) {
            save();
        }
    });
    super.addButton(saveButton);
    
    Button close = new Button("Close",
                              new SelectionListener<ButtonEvent>() {
    
        @Override
        public void componentSelected(ButtonEvent ce) {
            hide();
        }
    });
    super.addButton(close);

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Illinois
    Posts
    32

    Default

    I believe that I have done something similar to what you are looking for in a few different situations, but none of them are very intuitive.The easiest produces the following results:
    NXySb.png

    I have modified the button bar through some simple CSS to fit the needs of our users (I know... it's ugly).To get this to display the way I wanted, and for performance reasons, I am using an HTML container and adding my code through this.

    Without completely gutting my code I can give you a few snippets so you can see exactly what I'm doing.This code creates the HTML container and calls another class to build my header with the widget attached

    Code:
    HtmlContainer hc = new HtmlContainer();
    hc.setHtml(HtmlHelper.createHeaderWithWidget("Rating Factors", "myButtonBar"));
    hc.add(myButtonBar, "#myButtonBar");
    hc.setId("mySectionHeaderWithButtonBar");
    add(hc);
    The code that creates the header is here: (Because of some serious formatting issues when submitting I have attached a picture instead, which indeed causes MORE formatting issues... sorry.)

    eeSRz.jpg


    That seems fairly simple, and indeed it is. There are a few things that I had to do in order to get the alignment correct for my application which are:
    Code:
    myButtonBar.setAlignment(HorizontalAlignment.RIGHT);
    myButtonBar.setStyleAttribute("float", "right");
    I am certain that this could have been done more elegantly using more GXT widgets and layouts, but for my application they created unnecessary overhead that I could avoid easily enough. (We have roughly 10 of these on each screen, some with widgets and some without.)
    Last edited by Joshua093; 27 Feb 2012 at 11:31 PM. Reason: Formatting issues

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    19

    Default

    Thanks for the reply, I hoped in a simplest solution (via Java code).

Posting Permissions

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