Results 1 to 4 of 4

Thread: HowTo redner ajax response to Ext.Panel

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3

    Default HowTo redner ajax response to Ext.Panel

    Hi there,

    I' m trying to load the result of an Ajax Request to a Panel. The result is an php/html page. I'm new to sencha touch and can't figure out how to show this result page in a panel. In console log it shows the correct result (the html page) but now, I don't know how to render this. The page should be loaded when press the Button. So, this is what I'm doing:

    Code:
    App.views.LboIndex = Ext.extend(Ext.Panel, {            html: '<div id="test"></div>',
                scroll: 'vertical',
                styleHtmlContent: true,
                style: 'background: #d8efed',
                items: [{
                    scroll: false,
                    }, {
                    xtype: 'button',
                    text: 'TEST',
                    handler: function (e) { 
                            var test = Ext.get('test');
                            Ext.getBody().mask('Loading...', 'x-mask-loading', false);
                            Ext.Ajax.request({
                                url : 'myURL', 
                                params : { action : 'show_all' },
                                method: 'GET',
                                success: function (result, LboIndex) { 
                                    var response = result.responseText;
                                    //alert('success:' + result.status);
                                    console.log(response);
                                    test.update(response);
                                    Ext.getBody().unmask();
                                
                                },
                                failure: function ( result, request) { 
                                    alert('FEHLER: ' + result.responseText); 
                                    alert('FEHLER: ' + result.status);
                                }
                            });
                
                        }
                }],
            });
            Ext.reg('LboIndex', App.views.LboIndex);
    Now, can someone explain how to render the result to my panel?

    Thanx in advance.

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Answers
    4

    Default

    can you show the response in the console?

  3. #3
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27

    Default

    I would suggest using the initComponent override. you can then specify the scope of the button as the panel itself. you should be able to simply invoke the update method on the panel itself instead of embedding another div inside of it. I didn't test this, but i believe this should work. Incidentally, you should probably switch over to an ide that does proper javascript validation. something like webstorm. you had a couple of extra commas in your code.

    Code:
    App.views.LboIndex = Ext.extend(Ext.Panel, {            
        scroll: 'vertical',
        styleHtmlContent: true,
        style: 'background: #d8efed',
        initComponent: function(){
            this.items = [
                {
                    scroll: false
                },
                {
                    xtype: 'button',
                    text: 'TEST',
                    scope: this,
                    handler: function (e) {
                        Ext.getBody().mask('Loading...', 'x-mask-loading', false);
                        Ext.Ajax.request({
                            url : 'myURL',
                            params : { action : 'show_all' },
                            method: 'GET',
                            success: function (result, LboIndex) {
                                var response = result.responseText;
                                //alert('success:' + result.status);
                                console.log(response);
                                this.update(response);
                                Ext.getBody().unmask();
    
    
                            },
                            failure: function (result, request) {
                                alert('FEHLER: ' + result.responseText);
                                alert('FEHLER: ' + result.status);
                            }
                        });
    
    
                    }
                }
            ];
            App.views.LboIndex.superclass.initComponent.call(this);
        }
    });
    Ext.reg('LboIndex', App.views.LboIndex);

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    3

    Default

    Hi,

    thanx for your replies. I solved it for my own. Just added .dom to this line:

    Code:
    var response = result.responseText.dom
    Now it works.
    @NickT:
    I'm using netbeans and it uses a good javascript validation. I know having extra commas. I leave that commas during development and remove it after finishing.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •