1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    68
    Vote Rating
    2
    maecy is on a distinguished road

      0  

    Default Answered: How to insert buttons in grid

    Answered: How to insert buttons in grid


    I have a grid and I want to put button for the edit column, where for every entry, there will be a corresponding button.

    This is my grid code:

    Code:
    Ext.ns('dlti.view.widget');
    //User Maintenance grid
    
    
    Ext.define('dlti.view.widget.AdMngt' ,{
    	extend: 'Ext.grid.Panel',
    	id: 'dlti-admngt',
    	alias: 'widget.AdMngt',
    	forceFit: true,
    	stripeRows: true,
    	selType: 'rowmodel',
    	autosync: true,
    	plugins: [
    		Ext.create('Ext.grid.plugin.RowEditing', {
    			clicksToMoveEditor: 1,
    			autoCancel: false
    		})
    	],	
    
    
    	store: new dlti.store.PlaylistStore(),
    
    
    	
    	columns: [
    		{
    			text: 'Playlist Name',
    			dataIndex: 'playlist_name',
    			renderer: 	function renderDescTarget(val, p, record) {
    				var desc = '';
    				desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
    				return desc;
    			},			
    				
    		},
    		{
    			text: 'Status',
    			dataIndex: 'playlist_status',
    			renderer: 	function renderDescTarget(val, p, record) {
    				var desc = '';
    				desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
    				return desc;
    			},			
    				
    		},
    		{
    			text: 'Edit',
    			dataIndex: 'edit',
    			renderer: 	function renderDescTarget(val, p, record) {
    				var desc = '';
    				desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
    				return desc;
    			},			
    				
    		},
    		
    		
    		
    		
    	]
    });

  2. I think the actioncolumn is what you are looking for:

    http://docs.sencha.com/extjs/4.2.1/#....column.Action

    You can take a look at the example code on this link.

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      1  

    Default


    I think the actioncolumn is what you are looking for:

    http://docs.sencha.com/extjs/4.2.1/#....column.Action

    You can take a look at the example code on this link.

  4. #3
    Sencha User
    Join Date
    Sep 2013
    Posts
    68
    Vote Rating
    2
    maecy is on a distinguished road

      0  

    Default


    I don't quite understand the actioncolumn. Could you please give me an example with my code? I'm new with extjs, hope you understand.

  5. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    you can see an example on the link i shared. its not difficult at all.

  6. #5
    Sencha User
    Join Date
    Sep 2013
    Posts
    68
    Vote Rating
    2
    maecy is on a distinguished road

      0  

    Default


    Yeah, I checked. I did this but nothing happened.

    Code:
    columns: [
    		{
    			text: 'Playlist Name',
    			dataIndex: 'playlist_name',
    			renderer: 	function renderDescTarget(val, p, record) {
    				var desc = '';
    				desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
    				return desc;
    			},			
    				
    		},
    		{
    			text: 'Status',
    			dataIndex: 'playlist_status',
    			renderer: 	function renderDescTarget(val, p, record) {
    				var desc = '';
    				desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
    				return desc;
    			},			
    				
    		},
    		{
                xtype:'actioncolumn',
                width:50,
                items: [{
                    
                    tooltip: 'Edit',
                    handler: function(grid, dataIndex, colIndex) {
                        var rec = grid.getStore().getAt(dataIndex);
                        alert("Edit " + rec.get('playlist_name'));
                    }
                },
    			{
                   
                    tooltip: 'Delete',
                    handler: function(grid, dataIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        alert("Terminate " + rec.get('playlist_name'));
                    }
                }
    			],
    		}
    	
    	]

  7. #6
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    you also need to add an icon for the image to show. e.g.

    Code:
    icon: 'http://files.softicons.com/download/internet-icons/stuttgart-icons-by-pc.de/png/32/edit.png',  // Use a URL in the icon config
    this is just an image file from the internet, you should put the location of your image file here.

  8. #7
    Sencha User
    Join Date
    Sep 2013
    Posts
    68
    Vote Rating
    2
    maecy is on a distinguished road

      0  

    Default


    Instead of an icon, can I use a text?

  9. #8
    Sencha User
    Join Date
    Dec 2008
    Location
    Sofia
    Posts
    158
    Vote Rating
    6
    mx_starter is on a distinguished road

      0  

    Default


    You could also check for the componentcolumn ux

  10. #9
    Sencha User
    Join Date
    Sep 2013
    Posts
    68
    Vote Rating
    2
    maecy is on a distinguished road

      0  

    Default


    How can I use them as a button? I tried this
    Code:
    {                icon: 'shared/icons/fam/delete.png',
                    tooltip: 'Delete',
                    handler: function(grid, dataIndex, colIndex) {
                        var rec = grid.getStore().getAt(dataIndex);
    					var scope = this;
                       scope.LoadPlaylists().setLoading(true);
                    }
                }
    but only returns this error:
    Uncaught TypeError: Object [object Object] has no method 'LoadPlaylists'

  11. #10

Thread Participants: 2

Tags for this Thread