我是 Sencha Touch2 的新手，我在破坏浮动面板时遇到问题。我在列表项单击时在 ListView 顶部显示带有详细信息的浮动面板。我希望在单击“取消”按钮时破坏浮动面板。任何人都可以帮助我。谢谢。
FloatingPanel.js:
Ext.define('CustomList.view.FloatingPanel', {
extend: 'Ext.Panel',
alias: 'widget.FloatingPanel',
xtype:'datepanel',
config: {
id:'floatingPanel',
modal:true,
centered: true,
hideOnMaskTap:true,
width:'500px',
height:'650px',
items:[
{
styleHtmlCls:'homepage',
tpl:'<h4>{name1}</h4><h3>{name2}</h3><h3>{name3}</h3><h3>{name4}'
},
{
xtype:'toolbar',
docked:'bottom',
items:[{
text:'OK',
ui:'confirm',
action:'ShowTurnOverReport',
listeners : {
tap : function() {
console.log('Ok');
}
}
},
{
text:'Cancel',
ui:'confirm',
action:'Cancel',
listeners : {
tap : function() {
console.log('Cancel');
var panelToDestroy = Ext.getCmp('floatingPanel');
panelToDestroy.destroy();
}
}
}]
}
]
}
});
这是我的清单，
ShowList.js:
Ext.define('CustomList.view.ShowList',{
extend:'Ext.List',
xtype:'showlist',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'CustomList.controller.Main'
],
config:{
items:[
{
xtype:'list',
id: 'listitems',
onItemDisclosure: true,
store:'StoreList',
scrollable:'true',
itemTpl: [
'{firstname}'
],
itemTpl: '<font color="#990000"><h2>{lastname}</h2></font>{firstname}'
}
]
}
});
这是我的控制器
Main.js
Ext.define('CustomList.controller.Main', {
extend: 'Ext.app.Controller',
requires:['CustomList.view.FloatingPanel'],
config: {
refs: {
listView: 'listitems'
},
control: {
'main test2 list': {
activate: 'onActivate',
itemtap: 'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onItemTap: function(view, index, target, record, event) {
console.log('Item was tapped on the Data View');
var name1 = record.get('name1');
console.log('Item was tapped on the Data View'+name1);
var floatingDatePanel = Ext.create('CustomList.view.FloatingPanel');
var data = record.getData();
floatingDatePanel.getAt(0).setData(data);
Ext.Viewport.add(floatingDatePanel);
}
});