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.
- Focusing grid on load to activate down & up arrows
- Colouring grid rows based on some criteria
- Key events (especially Navigation keys) usage in grid with Internet Explorer (IE7) & Firefox
- 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') : '');
};
getRowClass changes the row CSS properties its applied for, but inside a row each cell element will have its own CSS class again.
In CSS for ‘cell-inner’ we need to set the font color.
.blue-row .x-grid3-cell-inner{
color:blue;
}
.red-row .x-grid3-cell-inner{
color:red;
}
.green-row .x-grid3-cell-inner{
color:green;
}
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.
So the code will be,
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;
}
The above 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.