Sencha Touch2：無法關閉按鈕上的浮動面板點擊？

Question

我是Sencha Touch2的新手，我在銷燬浮動面板時遇到了問題。我在列表項上點擊顯示浮動面板上的詳細信息。我希望浮動面板在點擊'取消'按鈕時被銷燬。任何人都可以幫助我。謝謝。

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); 

    } 

}); 

Answer 1

一個明顯的問題是：

Ext.getCmp('floatingPanel'); 

將應用於情況id: 'floatingPanel'而你SE itemid:'floatingPanel'

要檢索itemId，可以使Ext.ComponentQuery使用：

Ext.ComponentQuery.query('#floatingPanel')[0];