0
我有分量Ext.dataView.DataView內鳴叫的列表。點擊列表中的一項，它會打開一個包含推文細節的容器。這個cointainer由工具欄（帶標題和後退按鈕）組成，包含推文信息和包含推文用戶位置的地圖。後退按鈕應該返回到列表但不工作。如何解決？煎茶觸摸2：數據視圖和後退按鈕不工作
這是一個代碼：
'TweetList'
Ext.define('TwitterSearch.view.TweetList', { extend: 'Ext.dataview.DataView',
xtype: 'tweetlist',
requires: [
'TwitterSearch.view.TweetListItem',
'Ext.plugin.PullRefresh',
'Ext.plugin.ListPaging',
'TwitterSearch.view.contact.Show'
],
config: {
ui : 'timeline',
defaultType : 'tweetlistitem',
allowDeselect: false,
useComponents: true,
emptyText: 'No tweets found.',
itemTpl: ['TwitterSearch.view.contact.Show'],
plugins: [
'pullrefresh',
{
type: 'listpaging',
autoPaging: true
}
],
items: [
{
docked: 'top',
xtype : 'toolbar',
hidden: true,
ui : 'searchbar',
items: [
{
xtype: 'button',
ui : 'back',
text : 'Searches'
}
]
}
]
},
initialize: function(obj, eOpts) {
this.callParent();
}});
'顯示別名TweetDetail'
Ext.define('TwitterSearch.view.contact.Show', {
extend : 'Ext.Container',
xtype : 'contact-show',
requires: [ 'Ext.Map'],
config : {
store: 'Tweet',
title : 'Information',
baseCls : 'x-show-contact',
layout : 'vbox',
items : [
{
xtype: 'toolbar',
docked: 'top',
title: 'Tweets Detail',
items: [
{
xtype: 'button',
text: 'Back',
ui: 'back',
id: 'tweetDetailBackButton'
}
]
},{
id : 'contenuto',
tpl : [
'<div class="header">',
'<div class="avatar"><img src="../resources/images/default_profile_6_bigger.jpeg" /></div>',
'<h3>Nome: {nomeutente}</h3>',
'<h4>Tweet: {tweet} </h4>',
'</div>',
'<p>Descrizione:{descrizione}</p>',
'<p>Lingua:{lingua}</p>',
'<p>Etá:{eta}</p>',
'<p>Nazione:{country}, Cittá:{city}</p>',
//'<p>Nazione:{country}</p>',
//'<p>Cittá:{city}</p>',
'<p>Latitudine:{latitude},Longitudine:{longitude}</p>',
//'<p>Id Utente:{id_utente}</p>',
//'<p>Id Luogo:{id_luogo}</p>',
].join('')
}, {
xtype: 'map',
id: 'dettaglio-map',
flex: 1,
mapOptions: {
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
panControl: true,
rotateControl: true,
streetViewControl: false,
mapTypeControl: true,
zoom: 12
},
listeners: {
painted: function(map) {
record = map.getData();
},
}
}
],
record: null
},
updateRecord: function(newRecord) {
if (newRecord) {
this.down('#contenuto').setData(newRecord.data);
this.down('#dettaglio-map').setData(newRecord.data);
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
var map = this.down('map').getMap();
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (newRecord.data.latitude,newRecord.data.longitude),
map: map,
title : 'Position = ' + position.toString()
});
var infowindow = new google.maps.InfoWindow({
content: marker.title
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}});
'MainSearch' 搜索欄，SearchList組成和TweetList」
Ext.define('TwitterSearch.view.MainSearch', {
extend: 'Ext.Container',
xtype : 'mainsearch',
requires: [
'TwitterSearch.view.SearchBar',
'TwitterSearch.view.SearchList',
'TwitterSearch.view.TweetList'
],
config: {
fullscreen: true
},
initialize: function(obj, eOpts) {
this.callParent();
}});
和控制器...
Ext.define('TwitterSearch.controller.SearchController', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: {
selector : 'mainview',
xtype : 'mainview',
autoCreate: true
},
searchBar: 'searchbar',
searchList: 'searchlist',
tweetList: 'tweetlist',
searchField: 'searchbar > searchfield',
showContact: 'contact-show',
},
control: {
searchField: {
keyup: 'onSearch'
},
tweetList: {
itemtap: 'onTweetTap'
},
searchList: {
select: 'onSearchSelect',
itemswipe: 'onSearchSwipe'
},
'searchlist searchlistitem button': {
tap: 'onSearchDelete',
},
'contact-show button[ui=back]': {
tap: 'onBackButtonTap'
}
}
},
launch: function() {
Ext.getStore('SearchesStore').load({
callback: this.onSearchesStoreLoad,
scope: this
});
},
/**
* Called when the searchesStore has been loaded from localStorage. If it is NOT a phone, it will select one of the searches
* from the list, now that it is loaded.
* We don't want to select a search when it is loaded on a phone, as it would trigger the tweetList view to display.
*/
onSearchesStoreLoad: function() {
var search = Ext.getStore('SearchesStore').getAt(0);
if (!search) {
this.doSearch("%%");
}
},
/**
* Called when a search is selected from the searchList. It sets the store of the tweetList to the tweets() store of the selected
* search isntance. If the device is a phone, we set the active item to the tweetList. If it is now, we just ensure the tweetList
* is visible
*/
onSearchSelect: function(list, search) {
var store = search.tweets();
this.getTweetList().setStore(store);
store.load();
},
/**
* Called when an item in the searchList is swiped. It will show the delete button in the swiped item.
*/
onSearchSwipe: function(dataview, index, target) {
if (Ext.getStore('SearchesStore').getCount() < 2) {
return;
}
//set the currentDeleteButton so we know what is it to hide it in the listener below
this.currentDeleteButton = target.getDeleteButton();
this.currentDeleteButton.show();
//add a listener to the body, so we can hide the button if the user taps anywhere but the button.
Ext.getBody().on('tap', this.onBodyTap, this);
},
/**
* Called when the user taps on the body. Hides the delete button and removes the listener from the body.
*/
onBodyTap: function(e) {
if (this.currentDeleteButton) {
this.currentDeleteButton.hide();
}
//remove the listener
Ext.getBody().un('tap', this.onBodyTap, this);
},
/**
* Called when a user taps on an item in the tweetList. This is used to check if the element the user tapped on is a hashtag.
* If it is a hashtag, we get watchever that hashtag is and call {@link #doSearch} with it.
* We could possibly extend this to users, too.
*/
onTweetTap: function(list, index, target, record, e) {
target = Ext.get(e.target);
if (target && target.dom && target.hasCls('hashtag')) {
this.doSearch(target.dom.innerHTML);
}
else if (!this.showContact) {
this.showContact = Ext.create('TwitterSearch.view.contact.Show');
}
this.showContact.setRecord(record);
if (!this.showContact.getParent()) {
//Ext.Viewport.removeAll(true,true);
Ext.Viewport.removeAt(0);
Ext.Viewport.add(this.showContact);
}
this.showContact.show();
},
onContactShow: function() {
Ext.getCmp('viewport').getLayout().getAnimation().setReverse(false);
},
/**
* Called when a use taps the delete button on a searchList item
*/
onSearchDelete: function(button, e) {
var item = button.getParent(),
search = item.getRecord();
this.fireAction('destroy', [search, button], 'doDestroy');
},
/**
* Removes a specified search record from the searches store. The tablet controller subclass has some additional
* logic to select the nearest saved search
*/
doDestroy: function(search, button) {
var store = Ext.getStore('SearchesStore');
store.remove(search);
store.sync();
button.hide();
},
/**
* Called on the keyup event of the search field. If the enter/return key was pressed, it will fire the search action.
*/
onSearch: function(field, e) {
var keyCode = e.event.keyCode,
searchField = this.getSearchField();
//the return keyCode is 13.
if (keyCode == 13) {
//fire the search action with the current value of the searchField
this.fireAction('search', [searchField.getValue()], 'doSearch');
}
},
/**
* Called with the search action above. Searches twitter for a specified search term or record
*/
doSearch: function(search) {
var model = TwitterSearch.model.SearchModel,
tweetList = this.getTweetList(),
searchList = this.getSearchList(),
searchesStore = Ext.getStore('SearchesStore'),
searchField = this.getSearchField(),
query, index;
// ensure there is a search...
if (!search) {
return;
}
//ensure the tweetlist is visible
tweetList.show();
//check if ths search already exists in the searchesStore
index = searchesStore.find('query', search);
if (index != -1) {
//it exists, so lets just select it
search = searchesStore.getAt(index);
searchList.select(search);
//empty the field and blur it so it looses focus
searchField.setValue('');
searchField.blur();
return;
}
//if the passed argument is not an instance of a Search mode, create a new instance
if (!(search instanceof TwitterSearch.model.SearchModel)) {
query = search.replace("%20", " ");
search = new model({
query: query
});
}
this.scriviCookie('key', query, 100);
//scriviCookie('key', query, 100);
//String cookie = this.readCookie('key');
var x = this.leggiCookie('key');
alert ("Cookie = " + x);
//add the new search instance to the searchsStore
searchesStore.add(search);
searchesStore.sync();
// select the new record in the list
searchList.select(search);
//empty the field and remove focus from it
searchField.setValue('');
searchField.blur();
},
onBackButtonTap: function() {
this.getMain().setActiveItem(0);
},
scriviCookie: function(nomeCookie,valoreCookie,durataCookie)
{
var scadenza = new Date();
var adesso = new Date();
scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path = /';
},
leggiCookie: function(nomeCookie)
{
if (document.cookie.length > 0)
{
var inizio = document.cookie.indexOf(nomeCookie + "=");
if (inizio != -1)
{
inizio = inizio + nomeCookie.length + 1;
var fine = document.cookie.indexOf(";",inizio);
if (fine == -1) fine = document.cookie.length;
return unescape(document.cookie.substring(inizio,fine));
}else{
return "";
}
}
return "";
}});
因爲它可以解決這個問題嗎？
我無法使用導航視圖，因爲數據視圖如此創建，它會將我們在部件服務器中找到的數據庫所發送的推文的所有信息帶到我的手中。tweetList由推文組成（包括@的轉推，以及所有連接到推文的鏈接）以及推文的名稱。點擊tweet，它打開DataView的組件DataItem，它引入了推文的所有信息，也包括地圖和tweet消費者所有者的座標。我參考了Sencha Touch的示例TouchTweets。 – tock
我仍然不明白爲什麼你不能使用導航視圖。基本上它只是你所有其他容器周圍的另一個容器。數據來自哪裏並不重要。創建你的組件不會改變... – Martin
...無論如何，正如我所說：這似乎是問題出在你的onTweetTap和onBackButtonTap方法。在你的onTweetTap方法中，你從Ext.Viewport中刪除第一個（也可能是唯一的）項目並添加showContact視圖。但是，您不要在onBackButtonTap中更改我們的Ext.Viewport視圖。您只設置主視圖的activeItem。這不影響視口。將主視圖添加到onBackButtonTap中的視口中。這可以做到這一點。 – Martin