Sencha Touch2: Не удается закрыть плавающую панель при нажатии кнопки?

Question

Я новичок в 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); 

    } 

}); 

Answer 1

Одна очевидная проблема заключается в том, что:

Ext.getCmp('floatingPanel'); 

будет применяться для случая id: 'floatingPanel', тогда как вы u се itemid:'floatingPanel'

Чтобы получить itemId, вы можете использовать в Ext.ComponentQuery:

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