1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    Russian federation, Smolensk
    Posts
    38
    Vote Rating
    0
    Answers
    5
    Mike_javaJunior is on a distinguished road

      0  

    Default Answered: How to add a Button to the grid cell

    Answered: How to add a Button to the grid cell


    I have a grid in which I need to remove a line. For this I'd like to use button, which I want to insert to the last cell. Or just how to handle the cellClick or something like this?

  2. In GXT 2, you simple declare a GridCellRenderer for that column, and return the button (or any other widget) that you want to have drawn. Be aware that there are performance implications of drawing widgets, since that will be a new widget in each cell in that column.

    You can return either html or css from GridCellRenderer. It is possible to emit html instead of the Button widget, and listen for Event.CellClick from the grid and handle the click that way. This will be more efficient, but may take more effort to set up.

  3. #2
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Sunnyvale, CA
    Posts
    180
    Vote Rating
    20
    Answers
    16
    MikeRH will become famous soon enough MikeRH will become famous soon enough

      0  

    Default


    There are many ways to do this. One way I typically use is an actioncolumn.

    For example:

    PHP Code:
    columns: [
        {
            
    xtype 'actioncolumn',
            
    header 'Delete',
            
    width 50,
            
    align 'center',
            
    items : [
                {
                    
    icon:'some_icon.png',
                    
    tooltip 'Delete',
                    
    handler : function (gridrowIndexcolIndexitemerecord) {
                        
    //do your delete record function here
                    
    },
                    
    scope me
                
    }
            ]
        }

    Or if you want to pick up the delete event in your controller you can use something like.

    PHP Code:
    columns: [
        {
            
    xtype 'actioncolumn',
            
    header 'Delete',
            
    width 50,
            
    align 'center',
            
    items : [
                {
                    
    icon:'some_icon.png',
                    
    tooltip 'Delete',
                    
    handler : function (gridrowIndexcolIndexitemerecord) {
                        
    this.fireEvent('deleteRecord'thisrecord);
                    },
                    
    scope me
                
    }
            ]
        }

    And in your controller you would have something like:

    PHP Code:
    init: function(){
        
    this.control({
            
    'your_grid_alias':{
                
    deleteRecord:function(e,rec){
                    
    // Do your delete function here
                
    }
            }
        });


  4. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    Russian federation, Smolensk
    Posts
    38
    Vote Rating
    0
    Answers
    5
    Mike_javaJunior is on a distinguished road

      0  

    Default


    That's fine, but I use java

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Answers
    109
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      1  

    Default


    In GXT 2, you simple declare a GridCellRenderer for that column, and return the button (or any other widget) that you want to have drawn. Be aware that there are performance implications of drawing widgets, since that will be a new widget in each cell in that column.

    You can return either html or css from GridCellRenderer. It is possible to emit html instead of the Button widget, and listen for Event.CellClick from the grid and handle the click that way. This will be more efficient, but may take more effort to set up.

  6. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    Russian federation, Smolensk
    Posts
    38
    Vote Rating
    0
    Answers
    5
    Mike_javaJunior is on a distinguished road

      0  

    Default


    I implemented listener for the cellclick firstly but how to set an image for the cell? Or in case I'll finally decide to use buttons, how to find in which row the button was pressed to delete the right row? looK:
    Code:
    column.setRenderer(new GridCellRenderer() {
                @Override
                public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
    final int col = colIndex;
    final int row = rowIndex;
                    Button b = new Button("remove", new SelectionListener<ButtonEvent>() {
                        @Override
                        public void componentSelected(ButtonEvent ce) {
                            //remove(col, row, customerId);<<-HERE
                        }
                    });
    
                    b.setIconStyle("/gxt/images/gxt/icons/delete.png");
                    return b;
                }
            });
    which value I must post instead of row?

  7. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    Russian federation, Smolensk
    Posts
    38
    Vote Rating
    0
    Answers
    5
    Mike_javaJunior is on a distinguished road

      0  

    Default


    I've found. to do this I had to do this:
    Code:
    column.setRenderer(new GridCellRenderer() {
                @Override
                public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
    
    
                    final int row = store.indexOf((PropertyItem) model);
    
    
                    Button b = new Button("remove", new SelectionListener<ButtonEvent>() {
                        @Override
                        public void componentSelected(ButtonEvent ce) {
                            Window.alert("row index= " + row);
                            remove(row, customerId);
                        }
                    });
    
    
                    b.setIconStyle("/gxt/images/gxt/icons/delete.png");
                    return b;
                }
            });

Thread Participants: 2

Tags for this Thread