PDA

View Full Version : TabPanel update with HTML



ajmPal
20 Sep 2011, 3:25 AM
I have a Tab Panel. It contains 2 tabs, formTab and resultsTab. The first tab (formTab) contains a form with a submit button. When I press the submit buton, I call a url get perform a query and get results in HTML. I want to display the results, HTML, inside the second tab (resultsTab). How do I display the results inside the Results Tab ?



var reportPanel = new Ext.Panel({
title: 'Report Form',
renderTo: 'reportPanel'
width: 1300,
items:[{
layout: 'column', columnWidth: 1,
items:[
{xtype:'tabpanel', activeTab: 0, width: 1300, height:450, id: 'reportTabs',
items:[
{title: 'Query', id: 'reportQueryTab',
items:[
{xtype: 'form', id:'reportForm', url: 'reportQuery.do',
...
]
},
{xtype: 'button, id: 'reportGenerate', type: 'submit',handler: reportGenerate, text: 'Generate Report'}
]
},{
title: 'Results', id: 'resultsTab'}
]
}
]
});


function reportGenerate()
{
var form = Ext.getCmp("reportForm').getForm();
form.url = 'reportQuery.do';
form.getFieldValues(true)
form.getValues(true);
form.submit();
var reportTabs = Ext.getCmp('reportTabs');
reportTab.activate('resultsTab');
}

ajmPal
21 Sep 2011, 6:14 AM
I modified my code so that I call a function from the Results Tab that calls the url and returns HTML
The url seems to work fine but when the data is returned to the browser I get this error from Ext:
unexpected end of XML source
} ext-all-debug.js (line 11892)

How can I take the response and put it into the Results Tab ?




var reportPanel = new Ext.Panel({ title: 'Report Form', renderTo: 'reportPanel' width: 1300, items:[{ layout: 'column', columnWidth: 1, items:[ {xtype:'tabpanel', activeTab: 0, width: 1300, height:450, id: 'reportTabs', items:[ {title: 'Query', id: 'reportQueryTab', items:[ {xtype: 'form', id:'reportForm', url: 'reportQuery.do', ... ] }, {xtype: 'button, id: 'reportGenerate', type: 'submit',handler: reportGenerate, text: 'Generate Report'} ] },{ title: 'Results', id: 'resultsTab' loader: { contentType: 'html', loadMask: true }, listeners: {activate: reportQuery} } ] } ]});function reportQuery()
{
var form = Ext.getCmp("reportForm').getForm();
form.url = 'reportQuery.do';
form.getFieldValues(true)
form.getValues(true);
form.submit();
} function reportGenerate(){ var reportTabs = Ext.getCmp('reportTabs'); reportTab.activate('resultsTab');}

daltenhof
21 Sep 2011, 12:43 PM
Try using load():

tabReference.load({
url: 'myReport.do',
params: {param1:'firstParam',
param2:'secondParam'},
callback: function() {
// do smth
},
scope: this
});

ajmPal
22 Sep 2011, 9:00 AM
Started getting this error:
unexpected end of XML source (ext-all-debug.js (line 11540)

My POST looks ok. I've even taken everything out of the request. But still get this error.
I'm not uplading files. I just want to pass some XML to my JSP for display.

Firebug show this in the POST Response:

<html>
<head>
<meta http-quiv="Content-Type" content="text/html; charset=UTF-8"/>
<div>
<table>
<tr><td>TEST</td></tr>
</table>
</div>
</head>
</html>