ExtJS Tips for GridPanel Row – Marking, Colouring, Focusing & Special Key Event Firing

ExtJs, a powerful library for developing web application. Bit complex to learn & start with, but once you practice some examples it becomes easy. You need to have good knowledge in Object Oriented Programming to extend & implement your own features or controls, and to see power of JavaScript & ExtJS. Working with ExtJs is really interesting! Here listing some hints that may help you in your programming. Array-Grid example that comes with ext-2.0.2 is modified to demonstrate the same.

  1. Focusing grid on load to activate down & up arrows
  2. Colouring grid rows based on some criteria
  3. Key events (especially Navigation keys) usage in grid with Internet Explorer (IE7) & Firefox
  4. Marking selected grid row with some icon / text color change

The code in action can be seen at ExtJs Array Grid Sample
Same can be downloaded from: ExtJs Array Grid Sample – Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

1. To focus the grid.

After rendering the grid

grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();

2. Row colouring

Mainly this is CSS twist with use of getRowClass to change the text color of whole row.

grid.getView().getRowClass = function(record, index){
return (record.data.change<0.7 ? (record.data.change<0.5 ? (record.data.change<0.2 ? 'red-row' : 'green-row') : 'blue-row') : '');
};

3. Key Events

While working GridPanel, along with focusing the first row we were in a need of implementing the making of rows selected by user with Left Arrow & Right Arrow, as well they can navigate up & down with Up Arrow & Down Arrow.

The below code works partially in IE. It won’t capture navigational (along with arrows, page up, page down, home, end) keys & some special keyevents. But it works perfect in Firefox.

grid.on('keypress', function(e){
alert(e.getKey());
});

Whereas ‘keydown’ keyboard event works perfectly in both browsers for all keys. But the e.getKey() in IE won’t get the key code for navigational keys & some special keys. So need to change that to normal “e.keyCode”.

There maybe some property to set in ExtJS like in KeyNav -> forceKeyDown to true to make the getKey & keypress work in IE & FF. Not sure where & how exactly, but now the above quick solution worked without any problem.

grid.on('keydown', function(e){
alert(e.keyCode);
});

4. Marking Selected Grid Rows

In order to mark the selected rows, experimented on task example provided in ExtJs with Google Gears. Before experimenting used the data.columnName = ‘some value’ to set & gridview’s refresh() to apply. But at a time only a row used to change & previous selected rows used to change back.

In this same Array-Grid example added a new boolean value ‘true – flase’ column as first column ‘Status’. Added a ‘renderer’ to this new column, which sets a css class with empty box image if vale is false / tick mark if value true. Also 2 events, one mouse click and the other keydown event to grid to change the value of particular data element. Here the tricky point is if we change the value of it in store record, then automatically the respective CSS will be applied to it through its ‘renderer’. As said before if we change the ‘data’ in grid it won’t work, we need to apply the change of value in record of the store.

The code & css is


grid.on('keydown', function(e){
if(e.keyCode == 37){
var rec = grid.getSelectionModel().getSelected();
rec.set('status', false);
}else if(e.keyCode == 39){
var rec = grid.getSelectionModel().getSelected();
rec.set('status', true);
}
});

grid.on(‘rowclick’, function(grid, rowIndex, e){
var rec = grid.store.getAt(rowIndex);
rec.set(‘status’, !rec.get(‘status’));
grid.getView().focusEl.focus();
});


.task-completed, .task-check-over {
width:16px;
height:16px;
cursor:pointer;
background: transparent url(../images/check.gif) no-repeat center -16px;
}
.task-check-over {
background: transparent url(../images/check.gif) no-repeat center -32px;
}

Same can be downloaded from: ExtJs Array Grid Sample – Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

Advertisements

10 Comments

  1. May 1, 2009 at 9:12 am

    Thanks for sharing this example. I wanted to check out the full source and hosted sample but the domain seems to be down. Are they available from anywhere else?

    Philip

    • rafeekphp said,

      May 5, 2009 at 4:43 am

      Hi Philip,
      The domain is up now you can check the examples.

      Thanks 🙂
      Rafeek

  2. cevarief said,

    June 9, 2009 at 12:17 pm

    ExtJS is great for web application. Unfortunately can not use it for commercial. Unless buy 2 license. One for development and one for client.
    GPL option is still not fit as i never create GPL code.
    Thanks anyway for sharing.

    • rafeekphp said,

      June 10, 2009 at 9:13 am

      Hi cevarief,
      Thanks for your comments.
      Rafeek 🙂

  3. Himanshu said,

    July 28, 2009 at 11:25 am

    Hey,
    thanks for the valuable information.

    Himanshu

  4. darklow said,

    April 27, 2010 at 8:44 am

    Sample URL isn’t working

  5. Riya said,

    June 15, 2010 at 10:27 pm

    Thanks for the example. It helped me

  6. shrabani said,

    August 12, 2010 at 9:07 am

    thanks for the information.. it helped me on the day of release 🙂

  7. shubham said,

    September 22, 2010 at 6:38 am

    what is the use of special keys in extjs.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: