Sencha Touch list view list view list

Question

So, I'm Sencha Saint-Noub, and I may have stumbled upon my head. What I'm trying to do is filter data, which I have from one main list, then expand. So, I have my main list - Categories. When a category is selected, a list of places appears. I have problems with my models to talk to each other (I think). Since it costs right now, if I select a category, all my data is returned, where all I want is the selected category. I can filter my store using the property and the specified value. Is it possible to set the value as a variable that I pass from my categories menu? I was cr

Here is my code: 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 }); 

Answer 1

So it looks like you are communicating with 1.1, with whom I am now officially cursing, but I will give him a chance. My raids on using remotefilter always ended in tears, so I ended up on my own, instead of trying to use the built-in filtering methods. YMMV.

You can grab the store and the proxy server of the store, and then set the extraParams object, which is converted to receive parameters. You can also change the url this way. Therefore, in the past I wrote my own customization methods for filtering deleted files, because it just worked better than the built-in touch1.1 functions.

You would capture the repository and pass your filter to a method, for example:

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

So your main list uses onitemtap or selectionchange to find the record from the first (unfiltered) repository, takes that value and applies it to your setFilter in the second repository that your details page uses.

Also pay attention, since you said that you are a beginner. These stores are singleton, so if you have two lists that use the same store, if list1 filters the data in the store that will affect list2.

Answer 2

Here's how you are going to do what you need (for two filtering levels) in Sencha Touch 1.

// Models

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

// Stores

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

I have loaded the data in a line here so you can see how it is related. Each county identifier is now associated with a state identifier. For example, the Nasik district, exists in the state of Maharashtra. Therefore, the district identifier 1 for Nasik is now associated with stateId 1 for Maharashtra.

// For select box for states and areas

 { 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' } 

Now the selection fields are associated with the models / stores that we created earlier.

Now we look at the controller function called when the selection field for the states changes.

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

I gave you an advanced controller where you can support more than one level. For example, states will filter areas, areas can filter villages, etc. Etc. Therefore, in the controller we accept the level at which filtering is necessary. If filtering should be performed between states and regions, the first if condition will be called and the district store (and therefore the selection field) will be filtered to obtain the desired values.