PDA

View Full Version : Problem with "rowselect"



yallonb
27 Apr 2011, 5:48 AM
I'm trying to implement this code on a (basic) grid (GridPanel):

sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(grid, index, record) {
alert("Boo");
}
}
})

with no joy. Can anyone give me a hint as to why this doesn't work?

Tim Toady
27 Apr 2011, 5:55 AM
Can you be more specific with "doesn't work"? I dropped it into a grid and it seemed to work fine.



var store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
fields: [
'test'
]
}),
data: [['lol'],['wut'],['hey'],['yup']],
});

var cm = [
{
header: 'test',
dataIndex: 'test'
}
];
var grid = new Ext.grid.GridPanel({
columns: cm,
store: store,
width: 400,
height: 400,
renderTo: Ext.getBody(),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(grid, index, record) {
alert("Boo");
}
}
})
});

yallonb
27 Apr 2011, 6:13 AM
Hi Tim. Thanks for the quick reply. It doesn't bring up the alert. Not in IE, not in FF. I tried everything, but it just doesn't work. There is no error message by the way (on FireBug), all seems to be working good, but the alert won't come up.

yallonb
27 Apr 2011, 6:22 AM
Note: I've put a breakpoint (on Firebug) on the " alert("boo") " line, but it's skipping it (it doesn't seem to be executing it for some reason). Any idea why?

Tim Toady
27 Apr 2011, 7:02 AM
Can you post your grid (in code tags so it is readable). The alerts popped up fine for me in the grid I posted above. Also, do you have any overrides that could be affecting it?

yallonb
27 Apr 2011, 7:16 AM
No overrides that I can think of.

Here is the whole code:


var Movie = Ext.data.Record.create([
'id',
'title',
'director',
'runtime',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
{name: 'price', type: 'float'},
{name: 'available', type: 'bool'}
]);

var movieData = [
[
1,
"Office Space",
"Mike Judge",
89,
"1999-02-19",
3,
"Work Sucks",
"19.95",
1
],[
2,
"Electric Dreams",
"Don Draper",
110,
"1983-05-16",
2,
"Do computers dream?",
"16.75",
1
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
100,
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
],[
4,
"Rambo",
"Silvester Stalone",
120,
"1984-01-09",
1,
"It's back to 'Nam'",
"9.20",
1
],[
5,
"The King's Speech",
"Dan Ford",
125,
"2010-07-05",
2,
"More than just a speech",
"10.50",
1
]
];
//Defining the "Array" based store
var store1 = new Ext.data.Store({
data: movieData,
reader: new Ext.data.ArrayReader({idIndex: 0}, Movie)
});
//Defining the "JSON" based store
var store2 = new Ext.data.Store({
url: 'movies.json',
reader: new Ext.data.JsonReader({
root:'rows',
idProperty:'id'
}, Movie),
autoLoad: true
});


Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Movie Database',
height: 300,
width: 620,
store: store2,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
{header: "Title", dataIndex: 'title', sortable: true},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released', xtype: 'datecolumn', format:'d/m/Y'},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline', width: 150}
]
})
});
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(grid, index, record) {
Ext.Msg.alert('You Selected',record.get('title'));
//alert("Boo");
}
}
})

});

Tim Toady
27 Apr 2011, 7:23 AM
Your grid ends before you try to define your selection model. It needs to be within your grid.

yallonb
27 Apr 2011, 7:35 AM
Don't understand what you mean. Can u show me with code?

Tim Toady
27 Apr 2011, 7:38 AM
You have


var grid = new Ext.grid.GridPanel({
...
});
sm: new Ext.grid.RowSelectionModel()


You need


var grid = new Ext.grid.GridPanel({
...
sm: new Ext.grid.RowSelectionModel()
});

yallonb
27 Apr 2011, 7:56 AM
Thx. I've done it, but it tells me: "Expected } " on the same line of the "sm:..." definition. Here is the full code:


Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Movie Database',
height: 300,
width: 620,
store: store2,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
{header: "Title", dataIndex: 'title', sortable: true},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released', xtype: 'datecolumn', format:'d/m/Y'},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline', width: 150}
]
})

sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(grid, index, record) {
Ext.Msg.alert('You Selected',record.get('title'));
//alert("Boo");
}
}
})

});

});

Tim Toady
27 Apr 2011, 7:59 AM
You need a comma after your column model

yallonb
27 Apr 2011, 9:02 AM
Thanks Tim. That worked.

yallonb
27 Apr 2011, 9:43 AM
Hi Tim. I've added a "boxoffice" column, and want it painted red when the box office number is negative. Here is the code - how can I do that?


var Movie = Ext.data.Record.create([
'id',
'title',
'director',
'runtime',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
{name: 'price', type: 'float'},
{name: 'available', type: 'bool'},
{name: 'boxoffice', type: 'int'}
]);

var movieData = [
[
1,
"Office Space",
"Mike Judge",
89,
"1999-02-19",
3,
"Work Sucks",
"19.95",
1,
-1000000
],[
2,
"Electric Dreams",
"Don Draper",
110,
"1983-05-16",
2,
"Do computers dream?",
"16.75",
1,
-2000000
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
100,
"2002-02-15",
1,
"Altered State Police",
"14.95",
1,
-5000000
],[
4,
"Rambo",
"Silvester Stalone",
120,
"1984-01-09",
1,
"It's back to 'Nam'",
"9.20",
1,
70000000
],[
5,
"The King's Speech",
"Dan Ford",
125,
"2010-07-05",
2,
"More than just a speech",
"10.50",
1,
40000000
]
];
//Defining the "Array" based store
var store1 = new Ext.data.Store({
data: movieData,
reader: new Ext.data.ArrayReader({idIndex: 0}, Movie)
});
//Defining the "JSON" based store
var store2 = new Ext.data.Store({
url: 'movies.json',
reader: new Ext.data.JsonReader({
root:'rows',
idProperty:'id'
}, Movie),
autoLoad: true
});


Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Movie Database',
height: 300,
width: 720,
store: store1,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
{header: "Title", dataIndex: 'title', sortable: true},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released', xtype: 'datecolumn', format:'d/m/Y'},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline', width: 150},
{header: "Box Office", dataIndex: 'boxoffice'}
]
}),

sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(grid, index, record) {
Ext.Msg.alert('You Selected',record.get('title'));
}
}
})

});

});

Tim Toady
27 Apr 2011, 9:56 AM
That should be pretty easy. See the renderer config option of the column. All you need to do is set the metaData.css. There is an example in the API

http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.grid.Column

yallonb
27 Apr 2011, 10:03 AM
Woops - my bad. I meant to make a movie row red, not a column...

Tim Toady
27 Apr 2011, 10:59 AM
In that case you could specify the getRowClass function of the view in the grids viewConfig. The api example of the grid panel does something very similar to what you are wanting.

http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.grid.Column?class=Ext.grid.GridPanel