我還是新來的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