PDA

View Full Version : "Best" way to incorporate Ajax requests to fill in XTemplates in the MVC Architecture



MikeB
21 Nov 2011, 2:45 PM
I'm attempting to use the ExtJS 4.x MVC structure but am running into a "logistics" problem at the moment.

I have a controller which handles the "Select" event of a combobox (along with appropriate view, store, model, etc). So far all's good.

But once the user selects a value from the combobox, I want to launch several Ajax requests to get additional data which will be displayed in several different tables.

Now I "could" do a single Ajax call or even create one or more Grid Controls which would have their own store, etc. But I really don't need all the overhead of a Grid.
I just need to have the data come in and use an XTemplate to create simple tables with the results of all the data.
So, I'm looking at putting all the different Ajax requests directly into the select event handler of the one control.

But would like to know if there's a "better" way to make use of the MVC model so that each Ajax call could be part of it's own store, and then generate the tables via a view.
Any thoughts?

TIA
MikeB

mitchellsimoens
22 Nov 2011, 9:47 AM
The fewer Ajax calls the better...


Ext.Ajax.request({
url : '....',
params : {....},
success : function(response) {
var json = Ext.decode(response.responseText),
html = tpl.apply(json);

//do whatever with the html string
}
});

MikeB
22 Nov 2011, 2:34 PM
The fewer Ajax calls the better...

Thanks Mitchell, and yes I agree the fewer the better. But I was looking to find a way to keep to the MVC model, which what I came up with was this:
In my controller, I put together a function to handle the Combobox's Select event, which then got the store I wanted, set a load event handler for the store and processed the data returned in the store with an XTemplate.

Don't know if this is the best approach (would have liked to have called a view to handle the data but haven't figured out how to do that yet with this approach), but it works.

Your thoughts?


Ext.define('COMS.controller.ctlNewPlanTab', {
extend : 'Ext.app.Controller',
stores : [ 'sPatients', 'sLabInfo' ],
models : [ 'mPatientInfo', 'mLabInfo' ],
views : [ 'vNewPlanTab' ],

init: function() {
this.control({
'#NewPlanTab': {
render: this.onPanelRendered
},

'vSelectPatient' : {
select : this.onSelectChange
}
});
},

onPanelRendered: function() {
},

onSelectChange : function(combo, recs, eOpts) {
var piData = recs[0].data;
var fs = Ext.ComponentQuery.query('#dspPatientInfo_0001')[0];
fs.setTitle('<h2>Patient Information for - ' + piData.name + "</h2>");
fs.expand();
var tplPI_Info = Ext.create('Ext.XTemplate',
'<table border=1 width=80% style="margin: 0 10%;">',
'<thead><tr>',
'<th>Height</th><th>Weight</th><th>Age</th><th>DOB</th><th>Gender</th></tr></thead>',
'<tbody>',
'<tr><td>{H}</td><td>{W}</td><td>{A}</td><td>{DOB}</td><td>{G}</td></tr>'
'</tbody></table>');

tplPI_Info.overwrite(Ext.get("PI_PatientInformationTable"), piData);

var theStore = this.getStore('sLabInfo');
theStore.on('load', function(store, records, success, operation, opts) {
// First take all the data received
// and put it into a local JSON object for the XTemplate to process
var theData = { data : [] };
for(var rec in records) {
theData.data[rec] = records[rec].data;
}
var tplPI_LabInfo = new Ext.XTemplate(
'<h2>Laboratory Information</h2>',
'<table border=1 class="LabInfoResults">',
'<tpl for=".">',
'<tr><th>Report&nbsp;Release&nbsp;Date:</th><td>{relDate}</td></tr>',
'<tr><th>Name:</th>',
'<td><a href="#" onclick="labInfoDetails({#}); return false;">{name}</a></td></tr>',
'<tr id="LabInfoDetails_{#}" style="display:none;"><td colspan="2"><table border=1>',
'<tr><th colspan="2">Provider</th><td colspan="3">{provider}</td></tr>',
'<tr><th colspan="2">Specimen</th><th colspan="3">&nbsp</th></tr>',
'<tr><td colspan="2">{specimen}</td><td colspan="3">{specInfo}</td></tr>',
'<tr><th>Name</th><th>Results</th><th>Units</th>',
'<th>Reference</th><th>Range</th></tr>',
'<tr><td>{n}</td><td>{rslt}</td><td>{u}</td><td>{ref}</td><td>{rng}</td></tr>',
'<tr><th>Site</th><td colspan="4">{site}</td></tr>',
'</table></td></tr>',
'<tr class="dblBorder"><th>Comments:</th><td>{comment}</td></tr>',
'</tpl>',
'</table>'
);
tplPI_LabInfo.overwrite(Ext.get("PI_LabInfoTable"), theData.data);
var fs = Ext.ComponentQuery.query('#dspPatientInfo_0001')[0];
fs.doComponentLayout();
}, this);
theStore.load();
}
});

mitchellsimoens
22 Nov 2011, 6:44 PM
It's great to try and stick with the whole MVC way of doing things but it doesn't work for every situation. If you want all the stuff a Store/Model can do then by all means use them! If you are just wanting to get data to populate an XTemplate and don't want the Store/Model/DataView then just plainly use Ext.Ajax. Basically, do what ever your application calls for.

MikeB
23 Nov 2011, 6:15 AM
Thanks Mitchell.