render data in view from jsnop request

[pkvenu]

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]

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]

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]

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]

That will not work

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