PDA

View Full Version : how can you get record data in a dataview?



icebox.developer
26 Jul 2011, 8:54 AM
I've set up a Ext.DataView in my touch application that works no problem (store, template). What I am trying to do is create an "afterrender" function to manipulate the way the data is displayed in the template after it renders. I see the getNode and getRecord functions but I'm not exactly sure how to use them. Any ideas? :-/

Thanks!

jjerome
26 Jul 2011, 9:04 AM
Do you mean you want to filter it? or change the template? I don't understand what exactly you want to do.

icebox.developer
26 Jul 2011, 9:30 AM
Well I can get the data that I need and my template handles most of the output display. So that's cool. But there are a few records where I may want to add additional data elements based on certain conditions. So for example adding another div with the id or "title" of that record.


listeners:{
afterrender: function(dv,index,node,e){
dv.getEl().select('.Item').each(function(el){
createDatabox(dv, el, index);
});
}
}

I've added this listener and the function fires for each record. What I'm confused about is once in that function, how can i get the record data (i.e. id, title. etc) from the dataview for the current record?

jjerome
26 Jul 2011, 9:53 AM
Usually what i do for that is I handle it all inside of the template.

Example:




var infotpl = new Ext.XTemplate(
'<table border="0">'
+ '<tbody>'
+ '<tr class="heading">'
+ '<th width=100 valign="bottom"><center>Header 1</center></th>'
+ '<th width=80 valign="bottom"><center>Header 2</center></th>'
+ '<th width=150 valign="bottom"><center>Header 3</center></th>'
+ '<th width=150 valign="bottom"><center>Header 4</center></th>'
+ '</tr>'
+ '<tr class="detail">'
+ '<td width=100 valign="top"><center>{field1}</center></td>'
+ '<td width=80 valign="top"><center>{field2}</center></td>'
+ '<td width=150 valign="top"><center>{field3}</center></td>'
+ '<td width=150 valign="top"><center>{field4}</center></td>'
+ '<tpl if="!Init.isSmaller()">'
//Above is the check
//my custom function to see if the device is smaller than a tablet
+ '<th width=300>{field5}</th>'
+ '</tpl>'
+ '</tr>' + '</tbody>' + '</table>'
);

disregard the +'s, use comma's instead

So basically the line of html code is:


...
'<tpl if="evaluation here">',
//put the extra information here
//it will only be displayed if the evaluation is true
'</tpl>',
...
But if you are handling each record, you should be able to use the store to get the current record.

Example:


//use the store that the dataview uses for this
//index is one of those parameters you get in the afterrender function
var data = store.data.items[index].data;

//run through the debug with a breakpoint after you do this line of code
//to see what data comes back as.


I also believe that "dv" parameter also holds the current Store too (it does for me)
so you can also try "dv.store" in the above code

icebox.developer
29 Jul 2011, 6:23 AM
Hey I finally got back to this and was able to use your second example re: just accessing the data store directly. Exactly what I needed. Thank you! And you're correct, I was able to use the dv parameter to access the store directly.