Results 1 to 8 of 8

Thread: How to do buttons in a form field and in a cell of grid?

  1. #1
    Sencha User
    Join Date
    Jun 2015
    Posts
    7

    Default Answered: How to do buttons in a form field and in a cell of grid?

    Buttons in a cell of grid:
    1.PNG
    Buttons in a field of form:
    2.PNG

    Here are two screenshots of interfaces. How can I do that? Is there standard solution for that?

  2. Maybe widgetcolumn could work for you:

    http://docs.sencha.com/extjs/5.1/5.1....column.Widget

    Good luck / E

  3. #2
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    361
    Answers
    37

    Default

    Grid
    Easiest way of creating clickable "buttons" in a grid is using an actioncolumn:
    http://docs.sencha.com/extjs/5.1/5.1....column.Action

    Form
    Add a trigger to a field:
    http://docs.sencha.com/extjs/5.1/5.1...t-cfg-triggers

    Good luck / E

  4. #3
    Sencha User
    Join Date
    Jun 2015
    Posts
    7

    Default

    Thank you for the answer, but I have problem with grid: I can't put text in the action column. I need text and buttons in one cell of grid. Should I add some item in the actioncolumn? But actioncolumn items may contain only icon definitions.

  5. #4
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    361
    Answers
    37

    Default

    Maybe widgetcolumn could work for you:

    http://docs.sencha.com/extjs/5.1/5.1....column.Widget

    Good luck / E

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    To get the effect of a button you just need some suitable HTML and CSS. You can use a renderer on the column to churn out whatever mark-up you need.

    Wiring up the interactions (hover effects, click listeners, etc.) is a bit of a pain but if you use delegated listeners on the grid view it isn't too unmanageable and it should be pretty fast too.

  7. #6
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47
    Answers
    1

    Default

    I used a widgetcolumn and seemed to work pretty well.

    My example uses FontAwesome Glyphs, but you could just as easily bring in your own icons.

    Code:
            var grid = Ext.create('Ext.grid.Panel', {
                title: 'Sample Button Grid w/ Widget',
                renderTo: Ext.getBody(),
    
                store: store,
                width: '100%',
                columns: [{
                    text: 'Column 1',
                    dataIndex: 'name'
                }, {
                    text: 'Column 2',
                    dataIndex: 'name',
                    tooltip: 'Prompts for Deletion of this News Item.',
                    sortable: false,
                    xtype: 'widgetcolumn',
                    widget: {
                        xtype: 'button',
                        glyph: '[email protected]',
                        handler: function() {
                            Ext.Msg.alert('Status', 'Button Pressed.');
                        }
                    }
                }]
            });
    Here's the complete example: https://fiddle.sencha.com/#fiddle/pej

    Best Regards,
    Wesley

  8. #7
    Sencha User
    Join Date
    Jun 2015
    Posts
    7

    Default

    Thank everyone.
    For me now, the best solution is trigger in componentcolumn in a grid.
    It is a little bit strange, but skirtle didnt said about http://skirtlesden.com/ux/component-column
    Are there any problems with this extention?
    Thank you anyway.

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    There's a sliding scale here.

    Using some simple HTML & CSS with a suitable renderer is the light-weight solution. Done correctly it'll be really fast and there's little risk of serious problems down the line.

    A widget column is next on the scale. It's not as light-weight but you do save a little in terms of how much of the work you have to do yourself. If you need richer functionality then the HTML & CSS approach can start to become a lot of hassle whereas a widget column can just use features built into the standard widgets. This is an officially supported feature and is unlikely to cause significant upgrade problems in future.

    My extension is next along the scale. Injecting components is a really heavy-weight approach to the problem. Sometimes that's necessary but usually it isn't. It's worth noting that I wrote the extension for ExtJS 4, when widget column didn't exist. There are some cases that widget column can't handle well, such as when different rows need different widgets, and that's when my extension is most useful. As it is a third-party extension you also need to factor in the risks of adding another dependency to your application.

    From what you said in your question I saw no reason to resort to using my extension, though it is perfectly capable of giving you the desired effect.

Similar Threads

  1. Replies: 4
    Last Post: 6 Jun 2018, 1:41 PM
  2. Replies: 2
    Last Post: 9 Oct 2014, 7:18 PM
  3. Replies: 11
    Last Post: 27 Oct 2012, 1:27 PM
  4. Custom Form Field to update grid cell image
    By Frith in forum Ext: Q&A
    Replies: 1
    Last Post: 17 Jan 2012, 7:47 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
  •