Results 1 to 4 of 4

Thread: How to add button in DataGrid cell to each row?

  1. #1

    Question How to add button in DataGrid cell to each row?

    Hi,

    I have a datagrid that is working fine. I would like to add a button in a cell for each row in my grid. How can I do this?

    I know this is a basic question, I searched the forum but couldn't find anything.

    Thanks,



    -ws

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    It's not advisable to add components to rows, because the row will be destroyed and recreated when the data changes, without the component ever knowing it has become invalid.

    Instead I would suggest using RowActions or CellActions (see here).

  3. #3

    Default

    you can try row actions class and add the interactivity in your grids. This extension makes the ExtJS complete.
    Code:
    //this is the definition of the component
    var upaction = new Ext.ux.grid.RowActions({
                dataIndex: 0,
                actions: [{
                    qtip: 'Move top',
                    iconCls: 'up-action',
                    callback: function(grid, record, action, rowIndex, colIndex){
                        Ext.Ajax.request({
                            url: 'ajax.php',
                            params: {
                                id:        record.data.id,
                                con:    'games',
                                act:    'movetoup'
                            },
                            success: function(response){
                                league_grid_store.load();
                            },
                            failure: function(response){
                                Ext.Msg.alert('ERROR', 'Error loading leagues!');
                                league_grid_store.load();
                            },
                               scope: this
                           });
                    }
          }]
    });
    //and this is where you declare it
    columns: [
            {your column model bla bla},
            upaction, downaction
        ],
    //and also define the plugins property
    plugins: [upaction, downaction],
    //and don't forget to add
    <script type="text/javascript" src="js/Ext.ux.grid.RowActions.js"></script>
    i feel really comfortable with the interactive grids since i use this class

  4. #4
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145

    Default

    Does this work in Ext 3?
    I tried porting my Ext 2 application to Ext 3 and found some issues, which I've fixed, but this one seems quite strange. It should work, but it doesn't.
    No errors, it just doesn't render at all, no DOM element inside the cell.
    Here is how I do this (yes, I know that's old style, but should work anyway):
    Code:
    App.Admin.ManageUsers = function(config)
    {
    ...
    this.RowActions = new Ext.ux.grid.RowActions({
    			header:'Widgets',
    			actions:[{
    				iconCls:'viewUserWidgets',
    				tooltip:'View user widgets'
    			}],
    			listeners:{
    				'action':{
    					fn:this.onAction,
    					scope:this
    				}
    			},
    			align:'center',
    			autoWidth:false,
    			width:60
    		});
    .....
    this.ColModel = new Ext.grid.ColumnModel([
    			......
    			this.RowActions
    			
    		]);
    config = Ext.applyIf(config, {
    		title:txt.Users,
    		store:this.Store,
    		view:this.GridView,
    		cm: this.ColModel,
            frame:false,
    		border:0,
            clicksToEdit:2,
            tbar: [{
    .....
             }],
    		plugins:[this.RowActions]
    	});
    	App.Admin.ManageUsers.superclass.constructor.call(this, config);
    }
    Ext.extend(App.Admin.ManageUsers, Ext.grid.EditorGridPanel, {
    ....
    };
    I've omitted irrelevant fragments, maybe missed something, I just wanted to illustrated approach I used it was working in Ext 2.2.1, so should work here too.

    Any ideas?
    Last edited by KJedi; 4 May 2009 at 4:18 AM. Reason: spelling

Posting Permissions

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