Sencha Touch2: Cannot close floating panel on Button click? - list

Question

I am new to Sencha Touch2, i have problem while destroying the floating panel. I show floating Panel with details on top of ListView on list item click. I want the floating panel to be destroyed on 'Cancel' Button clicked.can anyone please help me. Thanks.
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();
}
}
}]
}
]
}
});
Here is my List,
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}'
}
]
}
});
Here is my controller
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);
}
});

Answer 1

One obvious problem is that:
Ext.getCmp('floatingPanel');
will be applied for case id: 'floatingPanel' whereas you use itemid:'floatingPanel'
To retrieve itemId, you can make use of Ext.ComponentQuery:
Ext.ComponentQuery.query('#floatingPanel')[0];