View Full Version : Read id value of selected item in dataview

18 Jan 2013, 5:08 AM
Hi, I have created an app that uses the dataview and Ext.XTemplate to display the data from a db. The code is as shown below:

var resultTpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="search-item" id={id} data-id={catid}>',
'<div class="left_box">',
'<div class="result_title wrapped">',
'<a class="thumb_placeholder result_link" href="#" style="background-image:url({imgt});"></a>',
'<div class="right_box">',
'<div class="result_title wrapped maintitle">',
'<div class="the_date">Posted on {thedate} by {poster} &nbsp;&nbsp;&nbsp;&nbsp; Price: {price}</div>',
'<div class="clear"></div>',

The reults being so many, I show the results in a dataview which has pagination at the bottom

I am then trying to access the selected item using the following code:

xtype: 'dataview',
tpl: resultTpl,
store: store,
itemSelector: 'div.search-item',
emptyText: '<div class="x-grid-empty">No Matching Threads</div>',
listeners: {

selectionChange: function(dv, nodes){

var current_index = nodes[0].index;
var current_rec = dv.getStore().getAt(current_index);
aid = current_rec.raw[0];
catid = current_rec.raw[1];

console.log("advert id - " + aid + "category id - " + catid )


When i run the above code, i am able to get the advert id and category id so long as am on the first page of the dataview display. The moment i move to page 2 and click on an item in the dataview, i get an error:

TypeError: nodes[0] is undefined
I think i might be doing this all wrong since i did not come across a better way to do it. What is the best way to get the values of a selected item in a dataview? Thnx in advance.

18 Jan 2013, 5:43 AM
The second argument of DataView's selectionchange event is an array of model instances. So you shouldn't have to even look up the record in the store, since the selected records passed via selection change are themselves records from the store.

So instead of looking up the record from the store by index (which will probably be different based on the current page), just get the id and the category id from the record itself:

selectionchange: function( dv, records ){
var record = records[0];
console.log("advert id - " + record.get( 'nameOfAIDField' ) + "category id - " + record.get( 'nameOfCategoryIDField' ) )

Note: I changed "nodes" to "records". It doesn't matter, of course, but I like to keep the naming of my arguments consistent with the docs so that I (and other devs) know what to expect from the argument's value.