Отображение ограниченного подмножества (или отдельной записи) магазина в Ext.DataView - PullRequest
Новая
       0

Отображение ограниченного подмножества (или отдельной записи) магазина в Ext.DataView

11 голосов
/ 27 марта 2011

В Sencha Touch мне часто требуется панель Ext.DataView, которая содержит небольшие записи подмножества или даже одну запись из коллекции в магазине.

Например, у меня может быть модельдля Car, у которого в магазине app.stores.cars есть тысячи записей о машинах, но я хочу показать меньшее подмножество этих предметов (скажем, только спортивные автомобили ) в моем спискеOfSportsCars DataView, а также показатьБольшая комплектация автомобилей в моем спискеOfCars DataView.

Моя первая думала использовать несколько магазинов.Таким образом, у меня будет один главный магазин для большого списка всех автомобилей и второй магазин с фильтром для моей подгруппы спортивных автомобилей.Тем не менее, теперь обновление модели из одного хранилища не приводит к автоматическому обновлению записи в другом хранилище, поэтому это сводит на нет цель использования DataView, поскольку изменения не обновляются повсеместно на странице при обновлении записей.

My вторая попытка была перезаписать метод collectData в DataView, который звучал точно , как то, что я делал: 

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'
});

Полный пример можно найти здесь .

Но, хотя задокументировано, что я могу / должен переопределить этот метод, Sencha Touch действительно не нравится, когда вы возитесь с длиноймассив, возвращенный collectData, так что это был тупик.

Как другие работают с отображением / обновлением нескольких коллекций одних и тех же записей?

UPDATE Былошибка, препятствующая работе collectData должным образом.С тех пор эта ошибка была исправлена ​​в Sencha Touch 1.1.0.

Ответы [ 4 ]

3 голосов
/ 05 мая 2011

Как написано в комментарии:

Я использовал ваш демокод в последнем релизе Sencha Touch и открыл все с помощью Google Chrome. В текущей версии ошибка исправлена. (Версия 1.1)

2 голосов
/ 04 мая 2011

вы можете использовать фильтры, чтобы получить подмножество данных, связанных с этим хранилищем. 

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];
                        }                    
                    }                
                }
        }
    },

});

Надеюсь, это поможет.

1 голос
/ 28 марта 2011

Я использую функции «фильтра» в Магазине.Не изменяя DataView (я использую список).

Вот фрагмент кода, в котором я выделю Программы с категорией, которая соответствует регулярному выражению.(У меня есть Программы с полем категории) 

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 (я использую Список) (это потрясающе)).

Таким образом, в вашем фильтре вы можете просто отфильтровывать спортивные автомобили, или автомобили определенной цены, или чего-то еще.

Надеюсь, это поможет ...

0 голосов
/ 28 сентября 2012

Для моего понимания Sencha Touch это не лучший подход.Если это все еще может быть хорошим для производительности, вы должны использовать второе «ведомое» хранилище со встроенными данными (http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Store), которые вы можете автоматически заполнять из основного хранилища подмножеством информации, которую вы хотите показать, когда событие происходит в главном хранилище,т.е. событие загрузки.

Если вы хотите иметь дело только с одним магазином, решение, которое я могу себе представить, это использовать xtemplate с тегом "tpl if" в виде данных, где вы хотите показать только некоторую информацию http://docs.sencha.com/touch/1-1/#!/api/Ext. для записи пустых записей. Возможно, также лучшим решением может быть использование пользовательской функции фильтра внутри xtemplate, чтобы скрыть видимость css для элементов, которые вы не хотите видеть.

...