extjs - 在 sencha touch 的 Ext 模板中存储值访问

Question

我在商店中有 2 个字段 1. 标题和 2. 活动布尔值。

我有以下 ext.template

itemTpl : Ext.create('Ext.XTemplate',
                 '<div style = "height:5px; border-top: 0px solid #DEDEDE;">',
                    '<div style="float:left" >',
                        '<input type ="image" src="images/sort-ascending-default.png" id = "img1"  name ="img1" width="30px" height="30px" />',
                    '</div>',
                    '<div  class="itemTitle" id="itemTitle" style="float:left;width: 70%;height: 20px;text-align: center;  color :#fffff0;">{title}</div>',
                    '<div style="float:right;  vertical-align:middle;">',
                        '<input type ="image" src="images/sort-descending-default.png" id = "img2" name ="img2" width="30px" height="30px"/>',
                    '</div>',
                    '<div style="clear:both"></div>',
                 '</div>'),

我想将 if 条件放入其中并想检查活动字段并更改标题的颜色，但我不知道如何访问存储字段值。

Answer 1

以下是如何在 tpl 中使用 if 条件：

itemTpl : Ext.create('Ext.XTemplate',
             '<div style = "height:5px; border-top: 0px solid #DEDEDE;">',
                '<div style="float:left" >',
                    '<input type ="image" src="images/sort-ascending-default.png" id = "img1"  name ="img1" width="30px" height="30px" />',
                '</div>',
                '<tpl if="active == true">',
                    '<div  class="itemTitle" id="itemTitle" style="float:left;width: 70%;height: 20px;text-align: center;  color :red;">{title}</div>',
                '<tpl else>',
                    '<div  class="itemTitle" id="itemTitle" style="float:left;width: 70%;height: 20px;text-align: center;  color :green;">{title}</div>',
                '</tpl>'
                '<div style="float:right;  vertical-align:middle;">',
                    '<input type ="image" src="images/sort-descending-default.png" id = "img2" name ="img2" width="30px" height="30px"/>',
                '</div>',
                '<div style="clear:both"></div>',
             '</div>'),