1
我还是新来的ST，所以我可能在这里做了几件事情错了，但我不知道问题出在哪里。追加到列表不更新上拉刷新
问题1 当我使用pull来刷新插件时，我得到的数据翻倍而不是刷新数据。我已经看到使用propertyId，所以我没有用。这应该很简单，所以可能是我做错了一些愚蠢的事情。
问题2 我想弄清楚最有效的方式来使用MVC架构，我已经通读了文档和许多例子。所以，我不知道我是不是很清楚，或者需要一个更好的例子。我正在尝试创建一个简单的应用程序，其中列出了我可以点击某个项目并获取该项目的详细视图。稍后我会将其演变成一个更强大的怪物，但现在我正试图了解基础知识。当我点击一个列表项目时，终于有了关闭按钮来关闭详细视图，但是当点击另一个项目时，我无法再获得详细视图。我已经读过，这是由于'autoDestroy：off'不存在，但我尝试过，也没有运气。我希望能够创建某些按钮，比如'close'，我可以放在多个视图中，只需要在控制器中有逻辑。
主视图
Ext.define('SenchaFirstApp.view.DistributorView', {
// extend: 'Ext.form.Panel',
extend: 'Ext.Container',
requires: ['SenchaFirstApp.store.DistributorStore', 'Ext.dataview.List', 'Ext.Toolbar', 'Ext.form.Panel'],
model: 'SenchaFirstApp.model.Distributors',
alias: 'widget.mainlist',
xtype: 'mainlist',
config:
{
layout: 'fit',
border: 5,
title: 'Distributors',
html: 'My datalist',
autoDestroy: false,
items:[{
xtype: 'toolbar',
docked: 'top',
title: 'Distributor List',
height: 40,
centered: true,
items: [
{
xtype: 'button',
text: 'Close',
width: 100,
height: 20,
name: 'close',
// iconCls: 'delete',
}]
},
{
autoLoad: true,
html: ['<div class="distr"><table><tr><th>Type</th><th>Distributor</th><th>Site</th><th>Status</th><th>Active</th><th>Assigned</th><th>State </th><th>Schedule</th><th>Finished</th></tr></table></div>'],
itemTpl: [ '<div class="distr"><table><tr><td>{t}</td><td>{distr}</td><td colspan="2">{site}</td><td>{status}</td> <td>{active}</td><td>{assigned}</td> <td>{state}</td><td>{schedule}</td><td>{finished}</td></tr></table></div>' ],
xtype: 'list',
store: 'DistrID',
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull down to refresh Distributor List'
}],
ui: 'showDetails',
id: 'mainlist',
autoDestroy: false,
}
]
},
});
详细视图
Ext.define('SenchaFirstApp.view.DetailView',{
extend: 'Ext.Panel',
requires: ['Ext.Toolbar'],
model: 'SenchaFirstApp.model.Distributors',
alias: 'widget.detailview',
xtype: 'detailview',
name: 'detail',
config:{
html: 'This will contain detailed information',
xtype: 'panel',
// fullscreen: false,
centered: true,
modal: false,
scrollable: true,
width: 300,
height: 200,
},
});
商店
Ext.define('SenchaFirstApp.store.DistributorStore', {
extend: 'Ext.data.Store',
requires: ['SenchaFirstApp.model.Distributors'],
config: {
// xtype: 'distrlist',
storeId: 'DistrID',
model: 'SenchaFirstApp.model.Distributors',
autoLoad: true,
proxy: {
type: 'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://gdata.youtube.com/feeds/api/users/hobbitin5/uploads&num=4',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
控制器来获取详细视图
Ext.define('SenchaFirstApp.controller.DistributorsController',{
extend: 'Ext.app.Controller',
config:
{
refs:
{
mainlist: '#mainlist',
},
control:
{
mainlist: {
itemtap: 'dispDetail'
},
},
//when item is tapped
listeners: {
itemtap: function(list, index, items, record)
{
console.log('An item was tapped and the listener heard it');
}
}
},
dispDetail: function(view, record) {
console.log('Item was tapped on the Data View');
var oldView = this.getMainlist();
var curRecord = oldView.getStore(record);
var newView = Ext.create('SenchaFirstApp.view.DetailView');
console.log(curRecord);
curRecord += 'other stuff';
newView.setHtml(curRecord);
newView.add(
{
xtype: 'toolbar',
docked: 'top',
title: 'Details',
height: 40,
items: [
{
xtype: 'button',
text: 'Close',
width: 100,
height: 20,
name: 'close',
}]
}
)
oldView.add(newView);
// Ext.Viewport.add(newView)
// Ext.Viewport.setActiveItem(newView)
}
});
控制器按钮（只是接近现在）
Ext.define('SenchaFirstApp.controller.NavController', {
extend: 'Ext.app.Controller',
config:
{
refs:
{
mainlist: 'mainlist',
main: '#mainlist',
closeBtn: 'button[name=close]',
detaillist: {
selector: 'panel panel[name=detail] deetaillist',
xtype: 'detailview',
}
},
control:
{
closeBtn: {
tap: 'closeView',
},
mainlist: {
tap: 'closeView',
},
detaillist: {
tap: 'closeView',
}
}
},
closeView: function(){
var newView = this.getMainlist();
// var child = Ext.Viewport.getActiveItem();
var child = this.getDetaillist();
var instance = Ext.getCmp('mainlist');
var activeIndex = instance.indexOf(instance.getActiveItem());
var curIndex = activeIndex+1;
var closeView = this.getDetaillist();
console.log('Close btn clicked' + ' child: ' + this.child + ' activeIndex: ' + activeIndex);
// Ext.Viewport.destroy(closeView); //(child);
newView.remove(child);
newView.destroy();
Ext.Viewport.add(Ext.create('SenchaFirstApp.view.DistributorView'));
` }
})`;
型号
Ext.define('SenchaFirstApp.model.Distributors', {
extend: 'Ext.data.Model',
config: {
idProperty: 'DistrID',
fields: [
{name: 'DistrID'},
{name: 't', type: 'string'},
{name: 'distr', type: 'string'},
{name: 'group', type: 'string'},
{name: 'site', type: 'string'},
{name: 'status', type: 'string'},
{name: 'active', type: 'string'},
{name: 'assigned', type: 'string'},
{name: 'state', type: 'string'},
{name: 'schedule', type: 'string'},
{name: 'finished', type: 'string'},
//{mapping: 't',
// name: 'DistrID'}
],
}
});
我明白这是一个很多，但任何帮助表示赞赏......即使是在正确的方向推动。提前致谢！另外，我确定那里面有东西不需要，因为我很难找到我正在努力完成的很好的例子，所以我从不同的例子中尝试了一些东西一起玩好：（
你可以添加你的商店定义？它目前的代码为SenchaFirstApp.view.DistributorView –
@Dave Barker，我很抱歉。我想我已经拥有了它，但是再次增加了我的视野以代替商店。它现在在那里，谢谢你的回应。 url是我刚刚在我的列表中找到的地方（空数据）。我正在构建一个包含实际数据的文件。 – codeMagic