Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Button in Grid

  1. #1
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default Button in Grid

    Brandon,

    Probably easy to do, but I can't figure it out, how can I add a button to a grid cell ?
    Button might be dependent on the grid data (text and enable/disable).

    Thanks,
    Gaëtan

  2. #2
    Sencha Premium User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    888

    Default

    Hi.

    Please check this example in the explorer:
    http://examples.sencha.com/gxt/4.0.2...Place:cellgrid

    It uses a TextButtonCell.

  3. #3
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    The text button cell works good. Another option is to use a composite cell to wrap the button so you can use it with other cell data types.

    Here is an example of a composite cell with a TextButtonCell.
    https://gist.github.com/branflake226...5096819fc52870

  4. #4
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    hey Brandon,

    It gets me halfway there.
    I need to be able to set any text for the button, button text is not based on the column value, it is a constant for the grid.
    I need to be able to enable/disable that button based on the column value.

    Specific:
    I am displaying a list of payroll entries, the column would display a button that says [Run Payroll], however if the payroll has already been run (status in my model), I need it disable the button.

    Thanks,
    Gaëtan

  5. #5
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    Got the button Text changed with:
    TextButtonCell finalButton = new TextButtonCell() {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
    sb.append(SafeHtmlUtils.fromSafeConstant("Final"));
    }
    };

    Still looking to be bale to enable/disable it

  6. #6
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    Also, I don't have a button "look",
    I added
    submitYn.setColumnTextClassName(CommonStyles.get().inlineBlock());

    Like in the explorer but not change:


    grid button.png

  7. #7
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    It takes two steps to disable the text button cell. This is one of those things I wish I could provide an easier workaround, but it's more verbose than I like. In the next major version, I'm going to add something to help with this. In the meantime, it's easier to to work with if the button is in a CompositeCell. This allows for passing the model to the cell easily. It can be done without a composite cell too. And it can be done with extending an appearance too.

    Here is an example, with screenshot at bottom
    - First, the composite cell uses HasCell, which uses getValue to get the value. It can be overridden in the render method too.
    - Secondly, the ViewConfig is used to provide the disable style.
    - Thirdly, the onBrowser event loop for the event cell can ignore events.
    https://gist.github.com/branflake226...388237f3d1b6c0

    Would this help you get closer to your goal?

  8. #8
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    hey Brandon,

    It is very close. I have not seen where to put the handling when the button is clicked, should I move that on the row click handler ?
    How can I reduce the padding around the text inside the button, it is a tad too tall ?

    Thanks,
    Gaëtan

  9. #9
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Good question. Because it's a cell, there isn't a handler method you can call to register a handler. Instead you have to add logic to the onBrowserEvent method in the cell. I'll check on the padding. Does that help?

  10. #10
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I've updated the source in the gist and added a screenshot of the result. I added a client bundle with css resource. I added a css selector for the button, to change the line height of the div with text. This css is set using the view config for the last column.

    https://gist.github.com/branflake226...388237f3d1b6c0

    Would this help you get closer to your goal?

Page 1 of 3 123 LastLast

Similar Threads

  1. Multiple button in Grid cell with button handler
    By deepakgxtlovers in forum Sencha GXT Q&A
    Replies: 0
    Last Post: 14 Jul 2015, 2:30 AM
  2. Replies: 3
    Last Post: 4 Feb 2015, 3:57 PM
  3. Replies: 0
    Last Post: 31 Jul 2013, 5:32 AM
  4. Button UI: Combine x-button-small with x-button-back and x-button-action
    By Benjamin Ansbach in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 21 Feb 2013, 2:05 PM
  5. Replies: 2
    Last Post: 20 Jan 2009, 7:03 AM

Posting Permissions

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