PDA

View Full Version : Getting first item in Ext.data.Store



arandlett
19 Jul 2011, 7:18 AM
I am trying to create a feature area, so I only need the latest(first) item from the Ext.data.Store. How do I grab that instead of looping through every item in the Ext.XTemplate.


new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<img src="" />',
'<div class="button">Buy</div>',
'</div>',
'</tpl>'
)

jratcliff
19 Jul 2011, 7:41 AM
If you have a handle to your store, would calling store.first() give you what you want?

arandlett
19 Jul 2011, 7:50 AM
I have my store setup:


this.store = new Ext.data.Store({
autoLoad: true,
model: "Media"
});


When I output this.store to the console I can get to the data but when I use this.store.first() I get undefined in the console.

jratcliff
19 Jul 2011, 8:32 AM
When are you calling this.store.first()? If you're Model is defined with an Ajax proxy then the data is loaded asynchronously so you have wait for the data to be retrieved from the server and loaded into the store before you can call any store methods that look for the data.

arandlett
19 Jul 2011, 8:48 AM
Is there a callback that can be associated with the store to get that data? Or do I need to create a separate model and proxy to make this happen.

arandlett
19 Jul 2011, 9:11 AM
It looks like I could use store.load(function(data){}); to accomplish that instead of setting autoload on the store?

jratcliff
19 Jul 2011, 10:04 AM
is your data inline data?

arandlett
19 Jul 2011, 10:09 AM
Data is coming from php files via json. This is what I came up with.


var p = this;
p.store = new Ext.data.Store({
model: "Media"
});

p.tpl = new Ext.Template(
'<div class="latest-wrap">',
'<h6>Latest Message</h6>',
'<a href="{audio}" class="listen">Listen</a>',
'<img src="{image}" class="latest-image" />',
'</div>',
'<h4 class="latest-title">{title}</h4>',
'<time>{date}</time>',
'<div id="moretabinfo">SWIPE TAB BAR TO SEEM MORE</div>'
);

p.store.load(function(data){
p.tpl.compile();
var dta = data[0].data;
//p.items = [p.tpl];
p.update(dta);
});


This is in the initComponent:function of my view. Is there a better way to accomplish this? Thanks for the help.

jratcliff
19 Jul 2011, 5:59 PM
Yes, an Ext Store has several events you can listen for and the one you would want to listen for is the 'load' event.

So, with that in mind we could change your code to:



var p = this;
p.store = new Ext.data.Store({
model: "Media",
autoLoad: true,
listeners : {
load: function(store, records, succesful, operation){
var dta = store.first();
p.update(dta);
}
}
});

arandlett
19 Jul 2011, 7:12 PM
Great thanks for the help. Sencha Touch has been fun to code in.