View Full Version : Grid Mark Complete Button

28 Jan 2011, 10:47 AM
I have a grid, whose content changes daily, and some employees have asked for a "Mark Complete" button on the toolbar. Now I know how to add a button to the toolbar, so we are good there.

Basically they want a button that they can click after selecting a row in the grid, that would basically change the color of the row, and then make the color "stateful". This visual indicator provides a way for them to "mark off" items in the grid, like a task list. This would of course need to be stateful per computer (cookies probably), so that each end-user can treat the "todo list" separately from the others.

Is there already some kind of functionality like this? If not, how would the button handler change the row class, or add one I guess.

p.s. I noticed there are some examples for task management, but I do not have access to Google Gears or Adobe Air.

28 Jan 2011, 11:21 AM
I'd like to restate my question, I got this working using the code below:

text : 'Mark Complete',
iconCls : 'icon-complete',
handler : function(){
var rowsSelected = grid.getSelectionModel().getSelections();
if (rowsSelected.length) {
for(i=0; i < rowsSelected.length; i++) {
var record = rowsSelected[i];
var idx = grid.store.indexOf(record);
var row = grid.getView().getRow(idx);
} else {
Ext.MessageBox.alert('Nothing Selected', 'There aren\'t any selected rows to mark complete.');

I should have just looked in the FAQ to begin with, doh. Anyway, only question is now, how do I make it stateful, so that a page refresh won't undo the rows that have added the row-complete class to them.

28 Jan 2011, 9:10 PM
You store the state in the record. IE, you add it as a field to your store. How you remember the value and populate it into your store is another matter, the most straight forward way would be to add it to each corresponding record in the database. You could do something clever like using cookies on the client side and letting the server side parse and append those values onto the corresponding records. Alas, I think that's beyond the scope of your question.

You have to choose how to do the highlighting. You can choose to do a row renderer or a cell render. Using the grid view to append a row-specific css class is the right choice. Your actually manipulating the dom outside the scope of the gridview in your example, that's already written into the gridview, that's what it does. I'll show you the code snippet, but it's available from the Ext docs on the grid view (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView). It does what your code does except it's built in. It's cool how similar your code is.

viewConfig: {
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
return 'row-complete';
return '';

That'll solve the view for you, so you just have to handle the click. See the docs for Record.set (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Record&member=set). Your store should be capable, or be made capable, of handling commits, I would assume you can handle the server side of storing the value, etc, so I leave that stuff out.

Helpful? Good luck!