PDA

View Full Version : Get the Ext.data.store output to TPL



thiszparveen
1 Oct 2012, 2:55 AM
Hi,

I am need to print the output of a webservice call (xml) to a simple html table(don't want to use grid panel).
Currently i defined store under panel and in the callback function i can able to print the webservice output to alet box. but i wanted to print the output into html table. for that i am using tpl in panel. But i am unable to print that. Could you please help me to resolve this issue? Thanks in advance.

Here is the code:

var fieldList = [
{name: 'serviceItemTypeName', mapping: 'serviceItemTypeName'}
];




var proxy = new Ext.data.HttpProxy({
url: getUrl,
method: 'GET'
});


var store = new Ext.data.XmlStore({
id:'mystore',
autoDestroy: true,
proxy: proxy,
root : 'serviceItem',
record: 'subscription',
//totalRecords:"@totalCount",
totalProperty: '@totalCount',
paramNames: {
start: 'startRow',
limit: 'recordSize'
},
baseParams: {
sortBy: "submittedDate",
sortDir: "Desc",
startRow:1,
recordSize:10
}, //only affect first page load
fields: fieldList
});





store.load({
callback: function (records, options, success) {
if (success) {
alert("hello success records.length..:"+records.length);
alert("records..:"+records);
alert("hello success records0..:"+records[0].data.serviceItemTypeName);
}
}
});


var tpl = new Ext.XTemplate(
'<div>testing...........{records[0].data.serviceItemTypeName}</div>'

&nbsp;);


var panel = new Ext.Panel({
renderTo: '#divName#',
title:'testing',
store:store,
tpl: tpl
});

This is the output of my webservice call: I need to print "serviceItemTypeName" value

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><serviceitem totalCount="1" recordSize="1" startRow="1" id="149">
<logicName>SiLaptop_service_item_04</logicName>
<name>Laptop_service_item_04</name>
<serviceItemData rowId="6">
<serviceItemAttribute name="Name">test</serviceItemAttribute>
<serviceItemAttribute name="purpose">work</serviceItemAttribute>
<serviceItemAttribute name="make">Apple</serviceItemAttribute>
<serviceItemAttribute name="model">macbook pro 15in</serviceItemAttribute>
<serviceItemAttribute name="location"/>
<subscription>
<customerID>1</customerID><customerName>admin 1111</customerName>
<displayName>test</displayName>
<id>88</id>
<organizationalUnitID>1</organizationalUnitID>
<organizationalUnitName>Site Administration</organizationalUnitName>
<serviceItemTypeName>Laptop_service_item_04</serviceItemTypeName>
</subscription>
</serviceItemData>
</serviceitem>

Legolas
1 Oct 2012, 3:27 AM
thiszparveen, if your store is being loaded correctly, you can use the override (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.XTemplate-method-overwrite) method for create the TPL. Like this:

var tpl = new Ext.XTemplate('<div>testing...........{serviceItemTypeName}</div>');


store.load({
callback: function (records, options, success) {
if (success) {
alert("hello success records.length..:"+records.length);
alert("records..:"+records);
alert("hello success records0..:"+records[0].data.serviceItemTypeName);


// Update the panel body by tpl
tpl.overwrite( panel.body, records[0].data );
}
}
});

For more examples see constructor (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.XTemplate-method-constructor) method in API DOC.

thiszparveen
1 Oct 2012, 3:42 AM
Excellent, It works. Thanks a lot for quick reply.:)

Legolas
1 Oct 2012, 4:08 AM
You're welcome.