PDA

View Full Version : Data grid row click handler?



smick
1 Nov 2010, 9:56 AM
Hello,

How would I capture a click on a data row and alert the row id? Is there a special row select handler?

I have rowselect set to false in my app. Thanks for any help.

smick
1 Nov 2010, 10:37 AM
My code is below. I'm trying to handle the click from inside the grid code.

Mostly I need to know when the div with class 'data' has been clicked.

I added


var something = Ext.get('.data');to the onready, but it returns null.




searchResults = {
xtype: 'grid',
autoHeight: true,
id: 'data-grid',
border: false,
store: storeResults,
disableSelection:true,
rowclick: funation() {
alert('been clicked');
},
columns: [
{
header: 'id',
dataIndex: 'id',
width:30,
renderer: function(val, x, store) {
return '<div > something goes here </div>';
}


},{
header: 'pages',
dataIndex: 'id',
width: 220,
renderer: function(val, x, store) {
return '<div> something goes here </div>';
}
},{
header: 'details',
dataIndex: 'id',
width: 250,
renderer: function(val, x, store) {

var data =
'<div class="data">something here: ' + store.data.something + '</div>';

return data;
}
},{
header: 'empty',
dataIndex: 'id',
width: '*',
renderer: function(val, x, store) {

return '&nbsp;';
}

}
]
};

swarm
1 Nov 2010, 11:10 AM
searchResults = {
xtype: 'grid',
autoHeight: true,
id: 'data-grid',
border: false,
store: storeResults,
//disableSelection:true,
//rowclick: funation() {
// alert('been clicked');
//},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: {
rowclick: function(searchgrid, rowIndex, e) {
var record = storeResults.getAt(rowIndex);
alert(record.data.id);
}
},
columns: [
{
header: 'id',
dataIndex: 'id',
width:30,
renderer: function(val, x, store) {
return '<div > something goes here </div>';
}


},{
header: 'pages',
dataIndex: 'id',
width: 220,
renderer: function(val, x, store) {
return '<div> something goes here </div>';
}
},{
header: 'details',
dataIndex: 'id',
width: 250,
renderer: function(val, x, store) {

var data =
'<div class="data">something here: ' + store.data.something + '</div>';

return data;
}
},{
header: 'empty',
dataIndex: 'id',
width: '*',
renderer: function(val, x, store) {

return '&nbsp;';
}

}
]
};





Try something like that...

Good docs: http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel

smick
1 Nov 2010, 11:16 AM
Thanks, that did the trick!

I took a loo at that page and did a few tests with the code, but I think my disableSelection:true was breaking it preventing it from working.

Also, you answered another question I was going to ask about selecting data from a store. Thanks! :)

swarm
1 Nov 2010, 11:18 AM
No worries

smick
1 Nov 2010, 11:20 AM
haha easy for you to say, i got to get this thing out tonight! :D

smick
1 Nov 2010, 11:24 AM
Do you know how I would select the id of the first and last rows on screen?

I'm using pagination and but our queries aren't using 'limits' for performance reasons, so we're passing first and last to determine pagination on the database. I'm tempted to script a way to determine this myself based on current page and total count, but surely there is an easier way.

swarm
1 Nov 2010, 11:30 AM
I'd maybe put a listener on the store listenting for the load event then use myStore.getAt(0) and myStore.getAt(myStore.getCount()-1);

Not sure how accurate that will be and you'll need to be careful about data ordering etc...

smick
1 Nov 2010, 11:59 AM
Do you have any idea how I would determine which pagination button was clicked? I need to send the pagination direction to the server too.

I was thinking about using a class click listener to handle this whole thing on, but I haven't been able to figure out how to do that yet.

my plan was to do this:

add a class listener, e.g. var next_button = Ext.get('.x-tbar-page-next.);

then monitor clicks on the individual buttons and set base params to be sent to the server.

something like direction: 'next', direction: 'last', etc.

So many issues with this design, but I don't have any options but to play with their existing api.

Thanks for all the help.

Condor
1 Nov 2010, 12:01 PM
You could use the store beforeload event for that (and compare the requested 'start' parameter with the current 'cursor' of the pagin toolbar).

smick
1 Nov 2010, 12:09 PM
Oh, of course, brilliant!

Much appreciated!

smick
1 Nov 2010, 12:35 PM
How do I get a handle on my pagination tool bar?

I'm getting 'search_pagination is undefined'.

I have the following beforeload on my store:



beforeload: function(){

//determine direction by comparing 'start' with current 'cursor'
var activePage = Math.ceil((search_pagination.cursor + search_pagination.pageSize) / search_pagination.pageSize);
//grab first and last data
//set base params
return true;
}
My pagination bar:



var search_pagination = new Ext.PagingToolbar({
pageSize: 5,
store: oStoreResults,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display",
});

smick
1 Nov 2010, 1:41 PM
My biggest question right now is how do I intercept the 'start' value on the pagination before it hits the server?

Condor
1 Nov 2010, 11:00 PM
beforeload: function(store, options) {
var start = options.params.start;
...
}

smick
2 Nov 2010, 1:56 PM
Awesome!