PDA

View Full Version : Set all actioncolumn icons in all rows of a grid



Peter Tierney
14 Jun 2013, 9:25 AM
Hello all:

I have created a grid with an action column allowing the user to add rows to another grid (and we don't want to use drag & drop for this). When clicking the icon, there is a handler set up and it looks like



handler: function(view, rowIndex, colIndex, item, e, record, row) {}


I now need to execute a add/remove all with only a reference to the grid. So the question is where in the grid hierarchy is the "item" which is supplied via the handler? I should be able to loop on all the rows and get that same item and I haven't found where it is buried or if there are accessor methods to get the object.

The only reason I am looking for the "item" as supplied here is to set the tooltip for the icon. Of course if there is a better way to set those icon tooltips for an entire grid then I'm open to ideas.

Thanks for any suggestions.

slemmon
16 Jun 2013, 11:12 PM
I get the feeling I may be over-simplifying here, but see if the below snippet is what you're needing. If not, can you clarify once more what it is you're wanting to do - the end result?



Ext.tip.QuickTipManager.init();


Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});


Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
getTip: function () {
return 'ActionColumn Tooltip';
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
getTip: function () {
return 'ActionColumn Tooltip';
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});

Peter Tierney
17 Jun 2013, 3:48 AM
That looks similar in functionality to getClass. If so that should solve the problem. Once I get a chance to try it and it works, I'll mark you response as the answer. Thanks.

Peter Tierney
17 Jun 2013, 7:57 AM
Well it was close and getTip() looks like it should've worked, but I needed a reference to the record to check a value there. I found another post you responded to in May which led me to a working version.

http://www.sencha.com/forum/showthread.php?262743-4.2.1.744-dynamic-tooltip-in-action-column-not-working

This is how I fixed the issue I had.


xtype: 'actioncolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {


if (metaData.column.items[0] !== null && metaData.column.items[0] !== undefined)
{
if (record.get('added'))
{
metaData.column.items[0].tooltip = 'Remove Point';
}
else
{
metaData.column.items[0].tooltip = 'Add Point';
}
}


}



This refers down to the icon's tooltip and access to the record is provided. This works for setting them all because the I can loop thru the records of the store and set the 'added' value this renderer is looking at.

I'd still be interested to know if there is a better way.

Thanks for the help.

slemmon
17 Jun 2013, 1:00 PM
getTip is passed a number of parms including the record (third param).



Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});


Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
getTip: function (val, meta, rec) {
return rec.get('firstname');
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
getTip: function (val, meta, rec) {
return rec.get('lastname');
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});

Peter Tierney
17 Jun 2013, 5:19 PM
I believe what you have may work if the data is never changed, but the 'added' property of my model changes depending on user input. When that boolean is changed, then the icon is changed and so is the tooltip that goes along with it. I tried what you suggested and the getTip doesn't appear to be called again when the underlying records change.

It is always possible I'm completely missing something.

slemmon
18 Jun 2013, 6:08 PM
Yeah, getTip is only used when the template for the cell is processed. What you can do is refresh the view to update the render using the getTip function using the current record data.



var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});




var grid = Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
getTip: function (val, meta, rec) {
return rec.get('firstname');
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
getTip: function (val, meta, rec) {
return rec.get('lastname');
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody(),
viewConfig: { preserveScrollOnRefresh: true }, // if you want to preserve the scroll position
tbar: [{
text: 'Update Row 2',
handler: function () {
store.getAt(1).set({
firstname: 'George'
});
grid.getView().refresh();
}
}]
});