1

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

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

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

4

1 回答 1

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。

于 2012-11-22T12:26:37.967 回答