PDA

View Full Version : HowTo redner ajax response to Ext.Panel



wfogl
24 Aug 2011, 10:17 PM
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:


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.

jjerome
25 Aug 2011, 11:05 AM
can you show the response in the console?

NickT
26 Aug 2011, 4:42 PM
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.



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

wfogl
27 Aug 2011, 12:00 AM
Hi,

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


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.