煎茶触摸 - 如何在按钮单击时删除/隐藏弹出面板

Question

我已将面板创建为波纹管

Ext.define('MyApp.view.DatePanel', {
extend: 'Ext.Panel',
alias: 'widget.DatePanel',
config: {
    itemid:'DatePanel',
    modal:true,
    centered: true,
    width:'320px',
    height:'110px',   
    items:[
            {
                xtype: 'datepickerfield',
                label: 'Select date',
                type:'date',
                itemId: 'rptDate',
                value: new Date(),
            },
            {
                xtype:'toolbar',
                docked:'bottom',
                items:[{
                    text:'OK',
                    ui:'confirm',
                    action:'ShowTurnOverReport'
                },
                {
                    text:'Cancel',
                    ui:'confirm',
                    action:'Cancel'
                }
            }
        ]
}

}）;

我使用下面的代码将此面板显示为弹出窗口

Ext.Viewport.add({xtype: 'DatePanel'});

现在在按钮取消单击我想隐藏/删除它

我试过了

Ext.Viewport.remove(Datepanel), 
var pnl = Ext.getCmp('DatePanel');
pnl.hide();

但没有任何效果。 我该怎么做？？

Answer 1

您可以通过多种方式执行此操作。

解决方案 1：

若要使用 Ext.getCmp() 功能，需要为组件设置id属性。

因此，请对您的DatePanel进行id，如下所示，

Ext.define('MyApp.view.DatePanel', {
extend: 'Ext.Panel',
alias: 'widget.DatePanel',
id:'datepanel',
config: {
     ......
     ......

然后在Cancel按钮单击处理程序上，编写以下代码...

{
 text:'Cancel',
 ui:'confirm',
 action:'Cancel'
 listeners : {
     tap : function() {
           var pnl = Ext.getCmp('datepanel');
           pnl.hide();
     }
 }
}

解决方案 2：

由于您已经定义了 itemid 属性，因此您可以使用以下行来获取对组件的引用。

var pnl = Ext.Container.getComponent('DatePanel');
pnl.hide();