View Full Version : viewConfig does not work - ExtJS3

14 Nov 2013, 12:18 PM
Dear all,
I am trying to change the color of the font of the rows that are checked.
I am using checkboxselectionModel.

Here is my listener code: This is the EditorGrid Listerner.

The grid is defined as follows:

xtype: 'editorgrid',
id: 'durationOut',
region: 'center',
sm: smDuration ,
cm: new Ext.grid.ColumnModel({
columns: [

My problem is when I check the row, none of the alerts are fired, so my code is not working.

listeners: {
rowclick: function(editorgrid, rowIndex, event) {
var selectedRecords = Ext.pluck(editorgrid.getSelectionModel().getSelections(), 'data');
var newDetails = Ext.zip(selectedRecords, function(record) {
return durationOutTemplate.apply(record);
Ext.getCmp('durationOut').getView().getRowClass = function(record, rowIndex, rowParams, store){ alert('hi');
var csm = Ext.getCmp('durationOut').getSelectionModel();
var selected = csm.getSelected();
if(selected.get('id') == record.get('id')){
return 'line-through-grid';
} else{
return '';
} else {
return '';

Thanks a lot in advance.

14 Nov 2013, 1:08 PM
You need to use the selectionmodel's rowselect listener :)

14 Nov 2013, 1:27 PM
I tried to put it under the rowselect listener of model.
It did not fire the alert. Looks like the function does not get called at all.

14 Nov 2013, 1:40 PM
Can you share your attempted code, as this is all working ok for me.

14 Nov 2013, 2:17 PM
I think what is happening is my code gets called when I edit a column.
However, I want this to be called everytime I select the checkbox. And want to revert back to the old style if the checkbox is unchecked.

How to prevent is from getting called at the row edit and fire it only when the checkbox is clicked.

14 Nov 2013, 2:29 PM
As I mentioned in my initial post, the checkboxselectionmodel rowselect listener will be able to handle this.

I would post a code example, but I'm on my phone at the moment, therefore not in a position to do so... :/

If you're just wanting to change the "selected row" styling, then this could be achieved with just CSS. Use Firebug to find out what class is applied to the selected row, then simply write some additional CSS for this class to change the row style (background, color, font, etc)

15 Nov 2013, 4:05 PM
Dear all,
I have this situation. I am using Checkboxselectionmodel like this. The problem is that as soon as I select a row, the checkbox for that row gets checked.
I want to be able to select multiple rows without checking the box. It should allow me to check the boxes for whichever Items I want.

var smDuration = new Ext.grid.CheckboxSelectionModel({
singleSelect: false,
checkOnly: false,
rowselect: function(sm, rowIndex, r) {

Could you please suggest me a way to achieve this.

Thanks a lot in advance,

15 Nov 2013, 4:42 PM
So you're using a selection model but don't want it to work how it's fundamentally intended?

It sounds like you want a row selection model which will allow you to select multiple rows using CTRL or shift, and then add a checkbox column which works completely independently from the selection model.

WHY, you might want this I have no idea though, so any insight into what you're actually trying to achieve will help us provide possible solutions.

15 Nov 2013, 5:03 PM
Thanks a lot for the reply willigogs. And you are right in saying what I want to achieve.
I am generating a spreadsheet. I dont want to include the items that are checked, in the final spreadsheet.
However, I also want to move the items to another tab of my page. For moving items, I want to simply select the row without checking them,

So, I want to basically use checkbox to exclude items from the final report. But the highlighted selections without checkbox to move them around.

Is this achievable.

Thanks a lot again.

15 Nov 2013, 5:18 PM
Thanks for the explanation - this makes more sense now :)

Everything is achievable, but it does sound like you need to detach the "checkbox filtering" from the selection model. Using a checkboxselectionmodel will always select the row when checked - therefore this cannot be used if you're using the selection of the rows for another action.

The immediate solution that comes to mind, is to simply add a new column to your grid which contains a checkbox (either use a renderer or possibly a template column). When you call to create your spreadsheet, you will first need to loop through each row and check the value of this new checkbox column (basically doing a manual version of .getSelections() ), then pass/filter these values.

16 Nov 2013, 12:06 PM
Thanks a lot willigogs.
Could you please post a sample code to use renderer. I have not used it. And i feel these features are not well supported in extjs3.

would really appreciate the help

18 Nov 2013, 2:51 AM
Here's an example of adding a checkbox to a column, then pulling out the row IDs for each one which is checked.

http://jsfiddle.net/Whinters/LfVcM/1/ (http://jsfiddle.net/Whinters/LfVcM/1/)

18 Nov 2013, 10:20 AM
Hi willigogs,
That was really great solution. I was trying to accomplish the same .
Thanks a lot for your quick responses and a working solution so near.

Once again, I really appreciate your help on this.

Thanks a lot,