Ext JS - nested Xtemplates

问题

I am new to ExtJS development. I have data from 2 different data stores (ex: DepartmentsStore and EmployeesStore). I am trying to show up list of departments in a parent table and display all employees within each department as a nested table into the parent Department table on UI.

I used XTemplates to load the data and bind it to my main panel. However I am having issues in nesting XTemplates. I am not sure if I am doing something wrong, any help is greatly appreciated. Here is the Xtemplate javascript code snippet,

  var tplEmployeesDetails = new Ext.XTemplate(
        '<table width="100%">',
        '<tr><td>Employee First Name</td>',
        '<td>Employee Last Name</td>',
        '<td>Email</td></tr>',

        '<tpl for=".">',
        '<tpl for="data">',
            '<tr><td>{DBxFIRSTNAME}</td>',
            '<td>{DBxLASTNAME}</font></td>',
            '<td>{DBxEMAIL}</td></tr>',
        '</tpl>',
        '</tpl>',
        '</table>'
);

var tplDepartmentDetails = new Ext.XTemplate(
    '<tpl for=".">',
    '<tpl for="data">',
        '<b>Department Detail:</b>',
        '<table>',
        '<tr><td>Department Name</td><td>{DBxDEPTNAME}</td></tr>',
        '<tr><td>Collateral Name</td><td>{DBxDEPTNAME}</td></tr>',

        'Employees Under Department:',
        '{[ this.renderEmployees(values.DBxDEPTID)]}',
        '</td></tr>',
        '{% } %}',

        '</table>',
    '</tpl>',
    '</tpl>',   

    {
        renderEmployees: function(DEPTID)
         { 
             appEngine.autoPost({
                 sysExtScope: 'false',
                 sysIgnoreExtension: 'true',
                 sysAction: 'getdbtable',
                 sysProjectName: 'OrgProject',
                 sysEngineApp: 'OrgApp',
                 sysEngineService: 'DepartmentService',
                 myRoot: 'SessionRespTable',
                 sysEngineOrderBy: 'DEPTID DESC',
                 DBxDEPTID:  DEPTID,
                 myFields: DepartmentServiceFields
              },function(EmployeesStore, Records, Resultflag, Options)
              {
                  employeesStore = EmployeesStore.getStore();

                  //Issue: THIS DOES NOT SEEM TO RETURN THE tplEmployeesDetails Xtemplate markup!!
                  return tplEmployeesDetails.apply(collatPolicyStore);
              });
         }
    }
);

tplDepartmentDetails.append(mainPanel.body, departmentStore);

回答1:

It looks to me like you are returning a string from an asynchronous function when you do appEngine.autoPost. For this to work, your renderEmployees function needs to synchronously return the string. XTemplates have no concept of an inner function returning a string asynchronously.

来源：https://stackoverflow.com/questions/19846271/ext-js-nested-xtemplates

标签

javascript

extjs