PDA

View Full Version : How to insert buttons in grid



maecy
21 Oct 2013, 2:11 AM
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:



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;
},

},




]
});

Farish
21 Oct 2013, 2:22 AM
I think the actioncolumn is what you are looking for:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action

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

maecy
21 Oct 2013, 2:49 AM
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.

Farish
21 Oct 2013, 2:51 AM
you can see an example on the link i shared. its not difficult at all.

maecy
21 Oct 2013, 3:03 AM
Yeah, I checked. I did this but nothing happened.



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'));
}
}
],
}

]

Farish
21 Oct 2013, 3:07 AM
you also need to add an icon for the image to show. e.g.


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.

maecy
21 Oct 2013, 3:31 AM
Instead of an icon, can I use a text?

mx_starter
21 Oct 2013, 5:51 AM
You could also check for the componentcolumn ux

maecy
21 Oct 2013, 6:23 PM
How can I use them as a button? I tried this

{ 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'

mx_starter
21 Oct 2013, 11:45 PM
http://www.sencha.com/forum/showthread.php?148064-Component-Column-Components-in-Grid-Cells

maecy
22 Oct 2013, 12:10 AM
EDIT
I actually got it working now with what Farish told me first. Thank you!

Farish
22 Oct 2013, 12:16 AM
the error you mentioned is in your code not in actioncolumn. use console.log(this) and see what component is there. you are calling a method for the wrong object.