Sencha 建筑师弹出窗口答案

【问题标题】：Sencha architect popup windowSencha 建筑师弹出窗口
【发布时间】：2013-12-06 09:47:44
【问题描述】：

我有一个网格，我尝试用“Ext.form.panel”类型的 ID“popup”打开视图，以编辑网格中的单个条目。

我最终得到了以下结果：

onGridpanelSelect: function(rowmodel,record,index,e0pts) {
    if(Ext.getCmp('popup')) var sample = Ext.getCmp('popup');
    else var sample = Ext.create('MyApp.view.popup');
    sample.update(record.data);
    // Ext.Viewport.add(sample);
    Ext.Viewport.setActiveItem(sample);
}

但是 Firefox 告诉我 Ext.Viewport.add 和 Ext.Viewport.setActiveItem 都不是函数。他到底想真正告诉我什么？

（TypeError: Ext.Viewport.add is not a function或TypeError: Ext.Viewport.setActiveItem is not a function，取决于评论是否存在）

【问题讨论】：

标签： javascript extjs sencha-architect

【解决方案1】：

在 Sencha Touch 中，Ext.Viewport 是一个单例，但在 ExtJS 中不是。而且add 不是静态方法，所以只能从Viewport 实例中调用。

如果您已经创建了一个视口，您可以通过组件查询获取对它的引用：

var viewport = Ext.ComponentQuery.query('viewport')[0];
// Now, we've got an instance!
viewport.add( ... );

现在，给定组件的名称（弹出窗口），我不会费心尝试将其添加到视口中，而是会在模式窗口中显示它...你知道，就像弹出窗口一样 ;)

var sample = Ext.getCmp('popup') || new MyApp.view.popup;

sample.update(record.data);

var win = Ext.widget('window', {
    title: "Sample"

    ,autoShow: true
    ,modal: true

    ,layout: 'fit'
    ,items: [sample]

    ,width: 300
    ,height: 300

    ,buttons: [{
        text: "Ok"
        ,handler: function() {

            // maybe you'll want to process your form here

            // remove your component before closing the window
            // to avoid having it auto destroyed
            win.remove(sample, false);

            win.close();
        }
    }]
});

【讨论】：