PDA

View Full Version : How to use Record object with Xtemplate?



extremed
5 Aug 2012, 5:45 AM
Hi

Is it possible to record.data object to loop through key value pair in a xtemplate?

what im looking to do is load selected record into a window and show all data that record has.

Regards

sword-it
6 Aug 2012, 12:13 AM
Hello,
If you want to load selected record in the window, then you can also use 'html' config of the window rather than using XTemplate. I am giving you an example which contains a gridpanel & I have added 'itemdblclick' event to the grid. On that event I am showing the window which contains all data that selected record has.


// these classes are used to have styles in the popup window.
<style type="style/css">
.dataItem {margin-bottom:5px;width:310px;}
.fieldLabel {font-weight:bold;float:left;width:100px;}
.fieldValue {float:left;line-height:20px;width:200px;}
.clear{clear: both;}
</style>



js file code.



// store of the grid.
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// grid panel
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
width: 400,
renderTo: Ext.getBody(),
// this is the dblclick event on which selected record detail will be shown in a window.
listeners: {
itemdblclick: function(view, record, item, index, event, options){
var data = record.data
, itemString = '';
for(var prop in data){
itemString += '<div class="dataItem"><div class="fieldLabel">'+prop+'</div><div class="fieldValue">'+ data[prop]+'</div><div class="clear"></div></div>';
}
var win = new Ext.Window({
bodyStyle: 'padding:10px;',
modal: true,
title: 'record detail',
html: itemString // itemString contains the data of selected record.
});
win.show();
}
}
});