javascript - Sencha 架构师弹出窗口

Question

我有一个网格，我尝试打开 ID 为“popup”且类型为“Ext.form.panel”的 View 来编辑网格中的单个条目。

我得到了以下结果:

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，取决于注释是否存在)

Answer 1

在 Sencha Touch 中，Ext.Viewport 是一个单例，但在 ExtJS 中不是。和 add不是静态方法，因此您只能从 Viewport 实例调用它。

如果您已经创建了视口(viewport)，则可以使用组件查询获取对它的引用:

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

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

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();
        }
    }]
});