Question

我想要做的是有条件地显示数据列表的项目，也就是说，当项目满足条件时，它将显示，否则，它将不显示（不表示显示空白项目）。我要显示的数据是这样的：

 [
      {'label':'one','isvisible':'1','value':'one'},
      {'label':'two','isvisible':'1','value':''},
      {'label':'three','isvisible':'0','value':'three'},
      {'label':'four','isvisible':'0','value':''}
 ]

我的清单如下：

                        xtype : 'list',
                        id :  'myListId',
                        disableSelection : true,
                        itemTpl : [
                                 '<tpl if="isvisible == 1 && value !=\'\'  ">',
                                    '{label}{value}',
                                 '</tpl>'
                        ]

但是当列表显示时，如果项目符合条件（属性'visible'为1或属性'value'为空），我会得到一些空行。

首先，我使用了'<tpl for="." '，我点了这个链接：link但是我的数据列表没有根节点，所以我使用了上面的itemtpl。

我不想修改我的数据列表的结构，所以我该怎么办？

更新：我不使用商店。我只是获取数据然后将数据分配给列表的数据配置，如：

var data=[{text:'1'},{text:'2'},{text:'3'}];//usually the data array comes from the response of an ajax request to the remote server.
var list=Ext.getCmp('myListId');
list.setData(data);

Answer 1

您可以在推送列表视图之前过滤控制器中的商店：

store.filter('isvisible', '1');

http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.Store-method-filter

编辑：

initialize: function(list) {
    var data = [];

    Ext.each(list.getData(), function(rec) {
        if (rec.data.isvisible == 1) data.push(rec);
    });

    list.setData(data);
}

Answer 2

试试这个

          {
                xtype : 'list',
                disableSelection : true,
                itemTpl : [
                     '<tpl if="isvisible == 1 && value !=\'\'  ">',
                     '{label}{value}',
                      '</tpl>'
                ],
               listeners : {
                initialize: function(list, eOpts ) {
                    var visibleFilter = new Ext.util.Filter({
                        property: 'isvisible',
                        value   : 1
                    });

                    var valueFilter = new Ext.util.Filter({
                        filterFn: function(item) {                               
                            return item.data.value.length != 0;
                        }
                    });

                    list.getStore().setFilters([visibleFilter,valueFilter]);
                }
            }
        }

Xtemplate显示空白项目，而不是使用sencha touch 2.1显示它

2 个答案: