Sencha Touch фильтр списка просмотра данных хранилище - PullRequest
4 голосов
/ 09 ноября 2011

Так что я новичок Сенча Touch, и, возможно, я забрался через голову.То, что я пытаюсь сделать, это отфильтровать данные из одного основного списка, а затем развернуть.Итак, у меня есть мой основной список - Категории.Когда категория выбрана, появляется список мест.У меня проблема с тем, чтобы заставить мои модели общаться друг с другом (я думаю).Как сейчас, если я выбираю категорию, все мои данные возвращаются, где все, что я хочу, это выбранная категория.Я могу отфильтровать свой магазин, используя свойство и указанное значение.Можно ли установить значение в качестве переменной, которую я передаю из меню моей категории?Я был cr

Вот мой код: Category.js

app.views.CategoryList = Ext.extend(Ext.Panel, {
layout: 'card',
fullscreen: true,
scrolling: 'vertical',
initComponent: function() {
    //Check if device is a phone, if so only display the title since the viewport is smaller
     if (!Ext.is.Phone) {
            var listTemplate = '{post_type}';

      } else {
            var listTemplate = '{post_type}';

      }
    this.list = new Ext.List({
        grouped: false,
        indexBar: false,
        itemTpl: '{post_type}',
        store: app.stores.CategoryList,
        listeners: {
            selectionchange: {fn: this.onSelect, scope: this}
        }
    });

    ///selectionchange : function(){
       // this.store.filter('post_type', listTemplate)
        //this.onSelect('post_type')

    this.listpanel = new Ext.Panel({
        layout: 'fit',
        items: this.list,
        dockedItems: [{
            xtype: 'toolbar',
            title: listingTitle
        }],
        listeners: {
            activate: { fn: function(){
                this.list.getSelectionModel().deselectAll();
                Ext.repaint();
            }, scope: this }
        }
    });

    this.items = this.listpanel;

    app.views.CategoryList.superclass.initComponent.call(this);
},

onSelect: function(sel, records){
    if (records[0] !== undefined) {
            var categoryCard = new app.views.LocationsList({
                        store: app.stores.LocationList,
                        //store: app.stores.LocationList.filter('post_type',null),
                        prevCard: this.listpanel,
                        record: records[0]
                    });
                    this.setActiveItem(categoryCard, 'slide');


    }
}
});

Ext.reg('CategoryList', app.views.CategoryList);

LocationModel.js

//The model will load the locations information you entered in the locations.xml file         after it has been fed through JSON

//Register the Location Model
Ext.regModel('Locations', {
fields: [{name: 'post_title', type: 'string'},
         {name: 'post_type', type: 'string'}],
belongsTo: 'Category'
});
//Load XML data from JSON into local store
app.stores.LocationsList = new Ext.data.Store({
model: "Locations", //Model to use for the Store
/*filters: [
          {
              property: 'post_type',
              value: null
          }
      ],*/
sorters: [{
 property: 'post_title', //Set the title as a sorter to the listing card can use the grouped list layout
                direction: 'ASC'
            }],
proxy: {
    type: 'ajax', //Load JSON from our source defined in the config file
    url: HTTP_ROOT + '/' + JSON_SOURCE,
    reader: {
        type: 'json',
        root: 'markers1'
    },

    id  : 'LocationsID'
},
getGroupString : function(record) {
    // return the first character of the address in order to group
    return record.get('post_title')[0];
},

listeners: {
    'load': function (t, r, s) {
        //Fire custom event once all the load is complete
        Ext.dispatch({
            controller: app.controllers.map,
            action: 'loaded',
            records: r
        });
    },
},
  autoLoad : true //We start loading the info into the datastore immediately after the app is started to make it available ASAP

});

CategoryModel.js

//The model will load the locations information you entered in the locations.xml file   after it has been fed through JSON

Ext.regModel('Category', {
fields: [
{name: 'post_type', type: 'string'},],
hasMany: {
    model: 'Locations',
    name : 'locations',
    filterProperty: 'post_type'
}
});

var data = {
"categories":[
{"post_type":"trails"},
{"post_type":"Adventure Guides"},
{"post_type":"brew"},
{"post_type":"Festivals and Races"},
{"post_type":"Paddle and Rafting"},
{"post_type":"Parks and Forests"},
{"post_type":"Campgrounds"},
{"post_type":"Rivers, Mountains, Lakes"}
]
};

//Load XML data from JSON into local store
app.stores.CategoryList = new Ext.data.Store({
model: "Category", //Model to use for the Store
data: data,
sorters: [{
                property: 'post_type', //Set the title as a sorter to the listing card can use the grouped list layout
                direction: 'ASC'
            }],
proxy: {
    type: 'memory', //Load JSON from our source defined in the config file
    //url: HTTP_ROOT + '/' + JSON_SOURCE, 
    reader: {
        type: 'json',
        root: 'categories'
    },
    id  : 'CategoryID'
},
getGroupString : function(record) {
    // return the first character of the address in order to group
    return record.get('post_type')[0];
},

listeners: {
    'load': function (t, r, s) {
        //Fire custom event once all the load is complete
        Ext.dispatch({
            controller: app.controllers.map,
            action: 'loaded',
            records: r
        });
    },
},
autoLoad : true //We start loading the info into the datastore immediately after the app is started to make it available ASAP

});

Ответы [ 2 ]

0 голосов
/ 25 марта 2013

Вот как вы делаете то, что вам нужно (для двух уровней фильтрации) в Sencha Touch 1.

// Модели

App.models.States = Ext.regModel('State', {
  idProperty : 'stateId',
  fields : [
    { name : 'stateId', type : 'integer'},
    { name : 'state', type : 'string'}
  ]
});

App.models.Districts = Ext.regModel('District', {
  fields : [
    { name : 'districtId', type : 'integer'},
    { name : 'stateId', type : 'integer'},
    { name : 'district', type : 'string'}
  ]
});

// Магазины

App.stores.StatesStore = new Ext.data.Store({
  model : 'State',
  data : [
    { stateId : 1, state : 'Maharashtra' },
    { stateId : 2, state : 'Andhra Pradesh' }
  ],
  sorters : 'state',
  autoLoad : true
});

App.stores.DistrictStore = new Ext.data.Store({
  model : 'State',
  data : [
    { districtId : 1, district : 'Nasik', stateId : 1 },
    { districtId : 2, district : 'Thane', stateId : 1 },
    { districtId : 3, district : 'Jalgaon', stateId : 1 },
    { districtId : 4, district : 'Hyderabad', stateId : 2 },
    { districtId : 5, district : 'Nizamabad', stateId : 2 },
    { districtId : 6, district : 'Kurnool', stateId : 2 }
  ],
  sorters : 'district',
  autoload : true
});

Я загрузил данные здесь, чтобы вы могли видеть, как они связаны.Каждый идентификатор района теперь связан с идентификатором штата.Например, район Насик существует внутри штата Махараштра.Следовательно, districtID 1 для «Nasik» теперь ассоциируется с stateId 1 для «Maharashtra».

// Для поля выбора для штатов и округов

{
 xtype: 'selectfield',
 name : 'state',
 id : 'state',
 label: 'State',
 store : App.stores.StatesStore,
 displayField : 'state',
 valueField : 'stateId',
 listeners : {
    change : function(t, value){
        Ext.dispatch({
            controller : 'Users',
            action : 'filterLocations',
            data : {value:value, level : 'district'}
        });
    }
 }
},
{
  xtype: 'selectfield',
  name : 'district',
  id : 'district',
  label: 'District',
  store : App.stores.DistrictStore,
  displayField : 'district',
  valueField : 'districtId'
}

Теперь поля выбора связаны сМодели / Магазины, которые мы создали ранее.

Теперь мы рассмотрим функцию контроллера, вызываемую при изменении поля выбора для состояний.

filterLocations: function(params){
    var value = params.data.value;
    var level = params.data.level;

    if(level == "district"){
        App.stores.DistrictStore.clearFilter();
        App.stores.DistrictStore.filter('stateId', value);
        var firstValue = Ext.getCmp('district').store.getAt(0);
        if(firstValue) Ext.getCmp('district').setValue('Select District');
    }
    else if(level == "block"){
        App.stores.BlockStore.clearFilter();
        App.stores.BlockStore.filter('districtId', value);
        var firstValue = Ext.getCmp('block').store.getAt(0);
        if(firstValue) Ext.getCmp('block').setValue('Select Block');
    }
},

Я дал вам расширенный контроллер, где может поддерживаться более одного уровня.Например, штаты могут фильтровать районы, районы могут фильтровать деревни и т. Д. И т. Д. Поэтому в контроллере мы берем уровень, на котором должна выполняться фильтрация.Если фильтрация должна выполняться между штатами и округами, первое условие if будет вызвано, и хранилище округа (и, следовательно, поле выбора) будет отфильтровано для получения желаемых значений.

0 голосов
/ 20 августа 2012

Похоже, что вы на связи 1.1, в которой я сейчас официально заржавел, но я попробую.Мои попытки использовать remotefilter всегда заканчивались слезами, поэтому я закончил кататься самостоятельно, а не пытался использовать встроенные методы фильтрации.YMMV.

Вы можете получить хранилище и его прокси, а затем установить объект extraParams, который преобразуется в параметры get.Вы также можете изменить URL таким образом.Так, в прошлом я писал собственные методы установки для фильтрации удаленных, потому что это, казалось, работало лучше, чем встроенные в touch1.1.

Вы бы захватили хранилище и передали свой фильтр такому методу:

setFilterParams: function(param) {
  var p = this.getProxy();
  p.extraParams = {filter_value: param};
  // p.url also works
}

... 
yourstore.load();

То есть ваш основной список использует onitemtap или selectionchange для поиска записи из первого (нефильтрованного) хранилища, принимает это значение и применяется к вашему setFilter во втором хранилище, которое использует ваша страница сведений.

Также обратите внимание, поскольку вы сказали, что вы новичок.Эти хранилища представляют собой синглтоны, поэтому, если у вас есть два списка, которые используют одно и то же хранилище, если list1 фильтрует данные в хранилище, которые влияют на list2.

...