PDA

View Full Version : render data in view from jsnop request



pkvenu
8 Nov 2011, 11:53 AM
Hi Guys,

I am having some issues in rendering a popup. This is what i am trying to achieve. On button click get the value from the text field and pass it as a parameter to the jsonp service. with the result obtained i need to open up the popup window and show the values. Right not i am getting the values from the call back but when i call the resultList.update(data) nothing updates.

Can you guys tell me what i am doing wrong. also if possible can you show me the right method to send a request from a view to a jsonp store with parameters and re-render the data.


var searchText = new Ext.form.Text({
id:'searchText',
name: 'searchtext',
placeHolder: 'Address, Intersection, Landmark',
useClearIcon: true,
cls: 'searchText'
});

var searchButton = new Ext.Button({
cls: 'search',
text: 'Search',
handler: function () {
var text = Ext.getCmp('searchText').getValue();
GetGeoLocationData(text, '');
popup.show();
// Ext.dispatch({
// controller: parking.controllers.controller,
// action: 'showMap',
// id: Ext.getCmp('searchText').getValue()
// });
}
});
var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
}, {
text: 'Close',
handler: function () {
popup.hide();
}
}]
}],
item:[resultList]
});


var popupResultTemplate = new Ext.XTemplate(

'<tpl for=".">',
'<div>',
'{[this.addCmp{xtype:"radiofield", text:{Representation}, handler:function fn() { alert("ok" + values.id);} }]}',
'<div>',
'</tpl>'
);

var resultList = new Ext.Panel({
id: 'GeoList',
scroll: 'vertical',
tpl: popupResultTemplate
});


The Model


parking.stores.GetGeoLocation = new Ext.data.Store({
model: 'parking.models.GeoLocation',
autoLoad: true
});

var GetGeoLocationData = function (search, optional) {
Ext.util.JSONP.request({
url: 'http://parking.511.org/index/M_GetGeoCodeLocation',
callbackKey: 'callback',
params: { location: search, city: optional },
callback: function (data) {
var result = data.Results;
resultList.update(result);
}
});

};


Thanks,
pawan

mitchellsimoens
8 Nov 2011, 1:54 PM
var panel = new Ext.Panel({
...

tpl : new Ext.XTemplate('<tpl for=".">{test}</tpl>)
});

panel.update([
{test : 'One'}
]);

Works... do you get any errors? If not, then simplify your code and start from scratch adding more and more.

pkvenu
8 Nov 2011, 2:22 PM
Thanks mitchellsimoens, I got it to work. I had made a small structural change in my code. Just one more question Is it possible to dynamically create a xtype in a Xtemplate. some thing like the one shown below. If you could give me a working example it would be really helpfull.


var panel = new Ext.Panel({ ... tpl : new Ext.XTemplate('<tpl for=".">{xtype: "radiofield", label:{test}, value:{}, handler: ext.dispatch()}</tpl>) });

mitchellsimoens
9 Nov 2011, 4:28 AM
var panel = new Ext.Panel({ ... tpl : new Ext.XTemplate('<tpl for=".">{xtype: "radiofield", label:{test}, value:{}, handler: ext.dispatch()}</tpl>) });

That will not work

pkvenu
9 Nov 2011, 6:48 AM
That will not work

Can you show me a way to create the controls dynamically in Xtemplate . any samples pls.