4
私はSencha Touchのnoobです。私は頭の中に入っているかもしれません。私がしようとしているのは、私が1つのマスターリストから得たデータをフィルタリングし、次にドリルダウンすることです。だから私は主なリストを持っている - カテゴリー。カテゴリが選択されると、場所のリストが表示されます。私は私のモデルがお互いに話をするのに問題がある（私は思う）。今のように、カテゴリを選択すると、すべてのデータが返されます。必要なものはすべて選択したカテゴリです。私は、プロパティと指定された値を使用してストアをフィルタリングできます。私のカテゴリメニューから渡す変数として値を設定することは可能ですか？私はここでSencha 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
});
このモデル/ストア/コントローラの概念をSencha Touch 2にも拡張できます。私はすぐに私の準備ができていませんが、それは比較的簡単に行うべきです。 – SashaZd