Sencha Touch可搜索列表-带有数据代理的新视图

Question

这里有两个快速问题。。。我如何使用这个例子

http://try.sencha.com/touch/2.0.0/examples/list-search/

一个可搜索列表，但在新视图中打开？这个例子将它定义为app.js中的主要应用程序，但我想在"FirstApp.view.searchlist"中使用它

我知道答案很简单，但我还是一个年轻的草根，需要朝着正确的方向努力。

此外，我不想像示例那样从嵌入式存储中提取数据，而是想修改它，从外部/代理JSON存储中提取我的数据，其定义如下：

商店：

Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.people',
sorters: 'lastName',
proxy:{
type:'ajax',
url:'http://xxxyyyzzz.com/data/dummy_data.json',
reader:{
type:'json',
rootProperty:'results'
}
}
}
});

型号：

Ext.define('FirstApp.model.people', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent']
}
});

那么，如何将该示例与数据存储和模型一起转化为应用程序中的"视图"呢？

非常感谢您的帮助！非常感谢。

Jake

---------------更新---------------

好的，太棒了。通过将您的方法与我找到的另一个教程相结合，我能够实现搜索功能(stoked)。现在还有一个问题。。。看起来很容易，但很难！选择/单击项目后，如何打开新的"详细信息"视图？？

搜索列表：

Ext.define('FirstApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
config: {
store : 'Students',
itemTpl:
'<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
itemCls:'place-entry',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search People...',
itemId: 'searchBox'
}
]
}
]
}
});

详细信息视图(我想在从搜索列表/主面板视图中单击名称时打开)：

Ext.define('FirstApp.view.Details',{
extend:'Ext.Panel',
xtype:'details',
config:{
layout:'fit',
tpl:'<div class="image_container"><img src="{image}"></div>' +
'<h1>{firstName:ellipsis(25)} {lastName:ellipsis(25)}</h1>'+
'<div class="status_container">{status:ellipsis(25)}</div> '+
'<div class="glance_container">    <div class="value_box"><div class="value_number"> {rank:ellipsis(25)}</div> <p class="box_name">Rank</p> </div>    <div class="value_box"><div class="value_number"> {attendance:ellipsis(25)}</div> <p class="box_name" style="margin-left: -10px;">Attendance</p> </div>  <div class="value_box"><div class="value_number">{discipline:ellipsis(25)}</div> <p class="box_name" style="margin-left: -4px;">Discipline</p> </div>    <div class="value_box"><div class="value_number"> {recent:ellipsis(25)}</div> <p class="box_name">Recent</p> </div> </div> '+
'<h2>Phone:</h2> <div class="phone_num"><p><a href="tel:{phone:ellipsis(25)}">{phone:ellipsis(25)}</a></p></div>'+
'<h3>Some info:</h3><p>Round all corners by a specific amount, defaults to value of $default-border-radius. When two values are passed, the first is the horizontal radius and the second is the vertical radius.</p>',
scrollable:true,
styleHtmlContent:true,
styleHtmlCls:'details'
}
})

搜索控制器：

Ext.define('FirstApp.controller.SearchController', {
extend : 'Ext.app.Controller',
config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['StudentStore'],
models : ['people'],
refs: {
myContainer: 'MainPanel',
placesContainer:'placesContainer'
},
control: {
'mainPanel': {
activate: 'onActivate'
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
},
'placesContainer places list':{
itemtap:'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onSearchKeyUp: function(searchField) {
queryString = searchField.getValue();
console.log(this,'Please search by: ' + queryString);
var store = Ext.getStore('Students');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('firstName')) ||
thisRegEx.test(record.get('lastName'))) {
return true;
};
return false;
});
}
},
onClearSearch: function() {
console.log('Clear icon is tapped');
var store = Ext.getStore('Students');
store.clearFilter();
},

init: function() {
console.log('Controller initialized');
},
onItemTap:function(list,index,target,record){  // <-----NOT WORKING 
this.getPlacesContainer().push({
xtype:'details',
store:'Students',
title:record.data.name,
data:record.data
})
}
});

Answer 1

好问题。我假设您正在尝试构建一个列表或数据视图。这里的关键是给你的商店一个"storeId"。我在下面修改了你的商店：

Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',
config:{
storeId: 'Students', // Important for view binding and global ref
autoLoad:true,
model:'FirstApp.model.people',
sorters: 'lastName',
proxy:{
type:'ajax',
url:'http://xxxyyyzzz.com/data/dummy_data.json',
reader:{
type:'json',
rootProperty:'results'
}
}
}
});

然后在视图中，引用要绑定的商店。注意，配置对象有"store"，它引用了我们上面的store：

Ext.define('app.view.careplan.CarePlanTasks', {
extend: 'Ext.dataview.List',
xtype: 'careplanTasks',
requires: [
'app.view.template.CarePlan'
],
config: {
store: 'Students', // Important!  Binds this view to your store
emptyText: 'No tasks to display',
itemTpl: Ext.create('app.view.template.CarePlan'),
},
constructor : function(config) {
console.log('CarePlan List');
this.callParent([config]);
}
});

现在您有了storeId，您可以通过执行以下操作在应用程序中的任何位置访问此存储：

Ext.getStore('Students')

您也可以通过调用加载方法从服务器加载记录：

Ext.getStore('Students').load();

您可以在应用程序中的任何位置执行此操作，但通常最好在控制器中执行。

希望这能有所帮助。

======更新======

因此，通过查看您的代码，我认为您需要修改List视图和控制器。给"FirstApp.view.MainPanel"一个xtype:"MainPanel"。接下来修改您的控制器配置如下：

config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['StudentStore'],
models : ['people'],
refs: {
mainPanel: 'MainPanel',    // set the object KEY to the name you want to use in the control object and set the VALUE to the xtype of the view
placesContainer:'placesContainer'
},
control: {
'mainPanel': {   //  this matches the key above, which points to your view's xtype
activate: 'onActivate',
itemtap: 'onItemTap'  //  listen for the item tap event on this List
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
},
'placesContainer places list':{
itemtap:'onItemTap'
}
}
},