我嘗試實現一個簡單的視圖,這是一個「彈出」像sencha touch 2.3.x.使用視窗彈出窗口永遠不會隱藏Sencha
我在我的NavBar中有一個按鈕,我顯示一個List,一個searchview和一個按鈕,以取消這個彈出。
但是,當我試圖隱藏或刪除彈出當我們點擊取消按鈕,這並不工作..
這裏是我的控制器主要方法:
Ext.define('Kone.controller.Equipment', {
extend: 'Ext.app.Controller',
config: {
refs: {
buttonEquipment: 'button#buttonEquipment'
},
control: {
"searchfield#mysearchfield": {
keyup: 'onSearchfieldKeyup'
},
"button#buttonEquipment": {
tap: 'onButtonTap'
}
}
},
onButtonTap: function(button, e, eOpts) {
//get the configuration of the list
var listConfiguration = this.getListConfiguration();
//check if the device is a phone
if (!Ext.os.is.Phone) {
//add a panel into the viewport
Ext.Viewport.add({
//panel gets special styling when it is floating
xtype: 'panel',
//give it a fixed width and height
width: 380,
height: 420,
//center the panel
centered: true,
//modal gives it a mask
modal: true,
//disable the hide on mask tap functionality of modal
hideOnMaskTap: false,
//give it a fit layout so the list item stretches to the size of this panel
layout: 'fit',
//give it 1 item which is the listConfiguration
items: [listConfiguration]
}).show();
} else {
//add the list into the viewport
Ext.Viewport.add(this.listConfiguration);
}
},
getListConfiguration: function() {
return {
id:'equipmentPanel',
//give it an xtype of list
xtype: 'list',
ui: 'round',
pinHeaders: false,
//itemTpl defines the template for each item in the list
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
//give it a link to the store instance
store: this.getStore(),
useSimpleItems: true,
grouped: true,
emptyText: '<div style="margin-top: 20px; text-align: center">Aucun équipement correspondant..</div>',
disableSelection: true,
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{ xtype: 'spacer' },
{
xtype: 'searchfield',
placeHolder: 'Equipement...',
listeners: {
scope: this,
clearicontap: this.onSearchClearIconTap,
keyup: this.onSearchKeyUp
}
},
{ xtype: 'spacer' }
]
},
{
xtype: 'button',
itemId: 'retourButton',
text: 'Retour',
docked: 'bottom',
handler : function(){
Ext.getCmp('equipmentPanel').hide();
}
}
]
};
}
});
此代碼:
xtype: 'button',
itemId: 'retourButton',
text: 'Retour',
docked: 'bottom',
handler : function(){
Ext.getCmp('equipmentPanel').hide();
}
only隱藏內容(列表+按鈕..),但白色網格背景停留在我的視圖之上.. 並刪除方法不起作用..
是的,我知道,但如何隱藏整個對象? – eento
給你的面板一個「itemId」(例如「mypanel」),然後調用Ext.Viewport.down('#mypanel')。hide() – arthurakay
問題是我從來沒有使用面板..我直接調用getListConfiguration()返回整個對象.. – eento