1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    40
    Vote Rating
    0
    pkvenu is on a distinguished road

      0  

    Default render data in view from jsnop request

    render data in view from jsnop request


    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.

    Code:
     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

    Code:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    40
    Vote Rating
    0
    pkvenu is on a distinguished road

      0  

    Default


    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>) });

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by pkvenu View Post
    var panel = new Ext.Panel({ ... tpl : new Ext.XTemplate('<tpl for=".">{xtype: "radiofield", label:{test}, value:{}, handler: ext.dispatch()}</tpl>) });
    That will not work
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    40
    Vote Rating
    0
    pkvenu is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    That will not work
    Can you show me a way to create the controls dynamically in Xtemplate . any samples pls.

Thread Participants: 1

Tags for this Thread