Question

在Sencha Touch中，我经常需要一个Ext.DataView面板，它包含一个小的子集记录，甚至是商店中集合中的一条记录。

例如，我可能有一个Car模型，其app.stores.cars商店中有数千条汽车记录，但我想显示这些商品中较小的一部分（比如说; 只是跑车）在我的listOfSportsCars DataView中，同时还在我的listOfCars DataView中显示了更大的完整汽车组。

我第一个的想法是使用多个商店。所以我有一个主要商店用于所有汽车的大清单，第二个商店有一个过滤器用于我的运动车子集。但是，现在从一个商店更新模型不会自动更新另一个商店中的记录，因此这会破坏使用DataView的目的，因为更新记录时页面中的更改不会更新。

我的第二次尝试覆盖了DataView上的collectData方法，该方法与我之后完全一样：

var card = new Ext.DataView({
    store: app.stores.cars,
    collectData: function(records, startIndex){
        // map over the records and collect just the ones we want
        var r = [];
        for( var i=0; i<records.length; i++ )
            if( records[i].data.is_sports_car )
                r.push( this.prepareData(records[i].data, 0, records[i]) );
            return r;
    },
    tpl: new Ext.XTemplate([
            '<tpl for=".">',
                  '<div class="car">{name}</div>',
            '</tpl>'
    ]),
    itemSelector: 'div.car'
});

可以找到完整的示例here。

但是，尽管记录了我可以/应该覆盖此方法，但当你弄乱了collectData返回的数组的长度时，Sencha Touch 真的不喜欢它，所以这已经死了末端。

其他人如何处理显示/更新相同记录的多个集合？

更新有一个错误阻止collectData按预期工作。该错误已在Sencha Touch 1.1.0中得到修复。

Answer 1

如评论所述：

我在最后一个Sencha Touch版本中使用了您的民主代码，并使用Google Chrome打开了所有版本。在当前版本中，错误是固定的。（1.1版）

Answer 2

您可以使用过滤器来获取与该商店相关联的数据的子集。

yourstore.filter('name', 'Joseph');

此外，您应该将“root”定义为函数，以便它始终返回一个数组。在sencha中的读者触摸你总是会得到一个数组作为响应，但是如果你有一个带有单个条目的JSON则不是这样，尝试这样的事情：

root: function(data) {
                    if (data) {
                        if (data instanceof Array) {
                            return data;
                        } else {
                            return [data];
                        }                    
                    }

商店的完整代码可能是这样的：

YourApp.ViewName = new Ext.data.Store({
    model: 'YourApp.models.something',
    proxy: {
        type: 'scripttag',
        url: 'http://somerandomurl/service/json',
        extraParams: {
            param1: 'hello'                 
        },
        reader: {
            type: 'json',
            root: function(data) {
                    if (data) {
                        if (data instanceof Array) {
                            return data;
                        } else {
                            return [data];
                        }                    
                    }                
                }
        }
    },

});

希望它有所帮助。

Answer 3

我使用商店中的“过滤器”功能。不修改DataView（我使用List）。

这是一个代码片段，我将使用符合正则表达式的类别来编写程序。（我有一个带有catagory字段的程序）

MyApp.stores.Programs.filter(function(object) {
    var regex = new RegExp(filterValue, 'i');
    return object.data.category.search(regex) >= 0; // found match
  });

您可以像这样清除过滤器：

MyApp.stores.Programs.clearFilter(false);

这将立即更新DataView（我使用List）（这太棒了）。

因此，在您的过滤器中，您可以过滤掉跑车或特定价格的汽车，或其他任何东西。

希望有帮助...

Answer 4

对于我对Sencha Touch的理解，这不是最好的方法。如果它仍然有利于性能，你应该使用第二个“奴隶”商店，内联数据（http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Store）当主要商店中发生事件时，您可以从主商店自动填充您想要显示的信息子集，即加载事件。

如果您只想处理一个商店，我可以想象的解决方案是在数据视图中使用带有“tpl if”标签的xtemplate，您只想显示一些信息 http://docs.sencha.com/touch/1-1/#!/api/Ext。写空记录。也许更好的解决方案可能是在xtemplate中使用自定义过滤器功能，以便在您不想看到的项目上隐藏可见性的CSS。

在Ext.DataView中显示商店的有限子集（或单个记录）

4 个答案: