Ext JS - 嵌套Xtemplates [英] Ext JS - nested Xtemplates

问题描述

我很开心ExtJS。我有来自2个不同数据存储的数据（例如：DepartmentsStore和EmployeesStore）。我试图显示父表中的部门列表，并将每个部门内的所有员工作为嵌套表显示在UI的父部门表中。

我使用XTemplates加载数据并将其绑定到我的主面板。但是我在嵌套XTemplates中遇到问题。我不知道如果我做错了，任何帮助都不胜感激。这是Xtemplate的JavaScript代码片段，

  var tplEmployeesDetails = new Ext.XTemplate（
'< table width = 100％>'，
'< tr>< td>员工名字< / td>'，
'< td>员工姓氏< / td> $ b'< 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>部门细节：< / b>'，
'< table>'，
'< tr>< td>部门名称< / td>< ; td> {DBxDEPTNAME}< / td>< / tr>'，
'< tr>< td>抵押品名称< / td>< td> {DBxDEPTNAME}< / td>< ; / tr>'，
 
'Employees Under Department：'，
'{[this.renderEmployees（values.DBxDEPTID）]}'，
'< / td> < / tr>'，
'{％}％}'，
 
'< / table>'，
'< / tpl& b'< / tpl>'，
 
 {
 renderEmployees：function（DEPTID）
 {
 appEngine.autoPost（{
 sysExtScope：'false '，
 sysIgnoreExtension：'true'，
 sysAction：'get dbtable'，
 sysProjectName：'OrgProject'，
 sysEngineApp：'OrgApp'，
 sysEngineService：'DepartmentService'，
 myRoot：'SessionRespTable'，
 sysEngineOrderBy：' DEPTID DESC'，
 DBxDEPTID：DEPTID，
 myFields：DepartmentServiceFields 
}，function（EmployeesStore，Records，Resultflag，Options）
 {
 employeesStore = EmployeesStore.getStore ）; 
 
 //问题：这不会返回tplEmployeesDetails Xtemplate标记！ 
 return tplEmployeesDetails.apply（collat​​PolicyStore）; 
}）; 
} 
} 
）; 
 
 tplDepartmentDetails.append（mainPanel.body，departmentStore）; 
  

解决方案

看起来像我正在返回一个字符串当您执行appEngine.autoPost时的异步函数。为了使其工作，您的renderEmployees函数需要同步返回字符串。 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);

解决方案

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.

这篇关于Ext JS - 嵌套Xtemplates的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！