Ext.data.Store (Convert recordSet into templatable array)

[foxwhisper]

Hey guys,

I ran into an issue today where I wanted to apply a data object from a Store, onto a XTemplate loop. An example of this was:



<h1 class="model_sec_header">Users</h1>
<div class="model_sec_body">
<tpl for="users">
<div class="model_sec_row">
<p style="font-weight:bold; float:left; width:100px; ">{username}</p>
<p style="float:left; width:150px; ">{password}</p>
<p style="float:left; width:170px; ">{email:ellipsis(25)}</p>
</div>
</tpl>
</div>


I then wanted to apply the data store against a template, like this:


new Ext.XTemplate(document.getElementById('addNewCustomer_card6').value).apply(dataStoreHere)


However, the data store did not have any public method or property which outputted the data in a format which XTemplate approved of. So, I wrote the following override to compensate:


Ext.override( Ext.data.Store, {
convertToObject: function() {
var obj = []
for (x=0;x<this.getCount();x++) {
obj.push(this.getAt(x).data)
}
return obj
}
});


Then, to apply the data struct against the template, just use:


struct = {
users:Ext.getCmp('usergrid').store.convertToObject()
}
alert(new Ext.XTemplate(document.getElementById('textAreaElementContainingHTMLCode').value).apply(struct))


That then gives you a template fully formatted with the data struct.

Enjoy!

[Animal]

DataView does this for you.

The equivalent would be


.model_sec_row {
overflow: hidden;
}


Plus



var myStore = new Ext.data.SimpleStore({
fields: ['username', 'password', 'email'],
data: [
['ABC', 'DEF', 'GHI'],
['JKL', 'MNO', 'PQR']
]
});
var myView = new Ext.DataView({
tpl: '<h1 class="model_sec_header">Users</h1>' +
'<div class="model_sec_body">' +
'<tpl for=".">' + // Loop through the Array which DataView creates from the Store.
'<div class="model_sec_row">' +
'<p style="font-weight:bold; float:left; width:100px; ">{username}</p>' +
'<p style="float:left; width:150px; ">{password}</p>' +
'<p style="float:left; width:170px; ">{email:ellipsis(25)}</p>' +
'</div>' +
'</tpl>' +
'</div>',
itemSelector: '.model_sec_row',
store: myStore
});
new Ext.Window({
title: 'Test',
height: 200,
width: 600,
layout: 'fit',
items: myView
}).show();


Then it's a BoxComponent which can be in a layout. You get sorting, paging, selection, mouse event relaying etc.

But it looks tabular, so wouldn't a GridPanel be appropriate?

[Condor]

You don't need to convert the data in the store to an object!

You just need to know how to create a template for a store:

var store = new Ext.data.SimpleStore({
fields: ['username', 'password', 'email'],
data: [
['ABC', 'DEF', 'GHI'],
['JKL', 'MNO', 'PQR']
]
});
var tpl = new Ext.XTemplate(
'<h1 class="model_sec_header">Users</h1>',
'<div class="model_sec_body">',
'<tpl for="values.data.items">',
'<div class="model_sec_row">',
'<p style="font-weight:bold; float:left; width:100px; ">{values.data.username}</p>',
'<p style="float:left; width:150px; ">{values.data.password}</p>',
'<p style="float:left; width:170px; ">{values.data.email:ellipsis(25)}</p>',
'</div>',
'</tpl>',
'</div>'
);
tpl.overwrite(Ext.getBody(), store);

[foxwhisper]

Okay, I *really* need to focus more when reading those docs.. Thanks for the advice on that guys :)