Question

我试图在EXTJS MVC中打开一个新窗口。单击数据视图中的图标时，将打开此窗口。能够在firebug中看到对窗口的调用，但我只是在应用程序中看到一个空白的屏幕。代码如下：

Ext.define('App.view.Test', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.test',
    initComponent: function () {

        var msgTxt = GENHTML.msgTxtOpen + LANG.ADDCOURSEF1 + GENHTML.msgTxtClose2

        var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

        var test_form = {
            xtype: 'panel',
            itemId: 'TESTPANEL',
            width: 400

            cls: 'msg effect1',
            layout: 'form',
            border: false,
            items: [{
                xtype: 'panel',
                //cls : 'winTitle',
                html: msgTxt,
                border: 0
            }, {
                xtype: 'form',
                itemId: 'TESTFORM',
                buttons: [{
                    text: LANG.BTSUBMIT,
                    iconCls: 'icon-submit-tb',
                    iconAlign: 'right',
                    cls: 'tip-btn',
                    id: 'BTGENSUBMIT',
                    action: 'buttonAction'
                }],
                items: [{
                    xtype: 'container',
                    anchor: '100%',
                    layout: 'fit',
                    items: [{
                        xtype: 'container',
                        baseCls: 'x-plain',
                        bodyStyle: 'padding: 5px 0 5px 5px',
                        items: [{
                            xtype: 'displayfield',
                            value: LANG.EDITCOURSEFL1
                        }, {
                            xtype: 'displayfield',
                            value: '<div class = "spacer10"/>'
                        }, {
                            xtype: 'textfield',
                            itemId: 'title',
                            name: 'title',
                            allowBlank: false,
                            fieldLabel: LANG.CATALOGUEWINFL1,
                            afterLabelTextTpl: required,
                            vtypeText: LANG.GENVT

                        }]
                    }]
                }]

                var config = {
                    xtype: 'window',
                    title: 'Edit Courses',
                    layout: 'fit',
                    itemID: 'TESTWINDOW',
                    id: 'TESTWINDOW',
                    closable: true,
                    modal: true,
                    items: [test_form]
                }

                var holder = Ext.getCmp('center');
                holder.remove(0);
                holder.add(Ext.apply(config));

                this.callParent(arguments);
            }

控制器：

onTestViewSelectionChange: function (view, record, h, ind, evt) {

    var edit = evt.getTarget('a.icon-edit-32');
    if (edit != null) {

        var view = Ext.create('Campus.view.Test');
        view.show(record);
    }
}

我不确定我是否正确创建了窗口，以及我是否正确调用它。请指导我。

Answer 1

您的代码中存在一些错误：

首先使用 show 。我认为你有覆盖它？我会选择loadRecord()并保留show()原样。

var view = Ext.create('Campus.view.Test');
view.show(record);

第二个是你Ext.apply()的电话，这里没有任何作为。你根本就不需要它。

holder.add(Ext.apply(config));

所以，在你的视图中直接放置一些逻辑，而不是控制器中的所有逻辑都是完全可以的。但请注意，我只知道你应用程序的这一小部分。

第三，您需要在窗口实例上调用show()，因为默认情况下它们不可见。但您可以设置 autoShow 属性，例如autoShow: true

第四，你的id道具设置是一个不好的习惯。如果可能，请不要使用 Ext.ComponentQuery 。

从EXTJS MVC中的数据视图打开一个新窗口

1 个答案: