1. #1
    Sencha User MikeB's Avatar
    Join Date
    Feb 2008
    Location
    Northern Md
    Posts
    104
    Vote Rating
    0
    Answers
    1
    MikeB is on a distinguished road

      0  

    Question Answered: "Best" way to incorporate Ajax requests to fill in XTemplates in the MVC Architecture

    Answered: "Best" way to incorporate Ajax requests to fill in XTemplates in the MVC Architecture


    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

  2. Quote Originally Posted by mitchellsimoens View Post
    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?

    Code:
    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();
         }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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


    The fewer Ajax calls the better...

    Code:
    Ext.Ajax.request({
        url : '....',
        params : {....},
        success : function(response) {
            var json = Ext.decode(response.responseText),
                html = tpl.apply(json);
    
            //do whatever with the html string
        }
    });
    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.

  4. #3
    Sencha User MikeB's Avatar
    Join Date
    Feb 2008
    Location
    Northern Md
    Posts
    104
    Vote Rating
    0
    Answers
    1
    MikeB is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?

    Code:
    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();
         }
    });

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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


    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.
    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.

  6. #5
    Sencha User MikeB's Avatar
    Join Date
    Feb 2008
    Location
    Northern Md
    Posts
    104
    Vote Rating
    0
    Answers
    1
    MikeB is on a distinguished road

      0  

    Default


    Thanks Mitchell.

Thread Participants: 1