如何在sencha架构师中使用Xtemplate?

时间:2014-11-17 12:27:45

标签: extjs touch

我正在使用sencha touch开发一个Web应用程序,我正在使用sencha架构师,我想在我的list itemtpl中添加一个条件来查看客户余额的差异:

balance>=0 --> green

balance<0  --> red

这是我的基本项目:

<table width="100%"><tr>
    <td>{c_name}</td>
    <td width="95px">
         <div style="width:95px;height:100%;background:#088cfc;text-align:center;color:#fff;">{balance}</div>
    </td>
    </tr>
</table>

如何使用sencha架构师IDE 添加xtemplate 并将其链接到我的列表?

谢谢,

2 个答案:

答案 0 :(得分:1)

老问题,但是在处理如何“在建筑师中使用XTemplate”时,我想要回答同样的问题,这是标题陈述和给出的答案实际上并没有向初始用户显示如何执行此操作的答案在我看来,在建筑师。

所以步骤是:

  1. 因此,将您的组件添加到Architect画布或您正在使用的组件中。
  2. 接下来转到Configs列表,找到'Process Config'的条目,然后单击加号 enter image description here

  3. 接下来,您将获得一个功能,允许您更新和处理任何当前的配置设置或添加您自己的设置。我的函数叫做'processMyView'(我的例子中使用的是数据视图,名字是这样的)

  4. 添加一些创建'tpl'
  5. 的javascript
  6. 确保在函数末尾返回'config'参数 enter image description here
  7. 在我的示例中,我有一个包含标题和所有者的文档列表,因此最终结果将如下所示。

    enter image description here

    最后,当您被Architect感到沮丧时,这可能是您可以采取的方法之一,以解决IDE在Config设置方面的刚性。

答案 1 :(得分:0)

我实际上在架构师中使用XTemplate只是使用&gt;&lt;而不是'&lt;'和'&gt;'在你的条件下:

如果余额&gt; 0 ==&gt;使用:如果余额&gt; 0见下文:

<table width="100%"><tr>
    <td>{c_name}</td>
    <td width="95px">
        <tpl if="balance &gt; 0"> 
         <div style="border-radius:5px;;width:95px;height:100%;background:#088cfc;text-align:center;color:#fff;font-size:12px;height:23px;padding-top:4px;">{balance} ₪</div>
        </tpl> 
        <tpl if="balance &lt; 0"> 
         <div style="border-radius:5px;;width:95px;height:100%;background:#f00;text-align:center;color:#fff;font-size:12px;height:23px;padding-top:4px;">{balance} ₪</div>
        </tpl> 
    </td>
    </tr>
</table>