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

在EXTJS MVC中从数据视图打开一个新窗口,extjs,extjs4,extjs-mvc,Extjs,Extjs4,Extjs Mvc,我试图在EXTJS MVC中打开一个新窗口。单击dataview中的图标时,此窗口打开。我能够在firebug中看到对窗口的调用,但我只是在应用程序中看到一个空白屏幕。 代码如下: Ext.define('App.view.Test', { extend: 'Ext.panel.Panel', alias: 'widget.test', initComponent: function () { var msgTxt = GENHTML.msgTxtOpe

我试图在EXTJS MVC中打开一个新窗口。单击dataview中的图标时,此窗口打开。我能够在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);
            }

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

您的代码中有一些错误:

首先是使用。我想你已经覆盖了它?我会选择
loadRecord()
并保持原样

var view = Ext.create('Campus.view.Test');
view.show(record); 
第二个是调用
Ext.apply()
,它在这里什么也不做。你根本不需要它

holder.add(Ext.apply(config));
因此,我想,在您的情况下,将一些逻辑直接放在视图中,而不是全部放在控制器中是完全可以的。但请注意,我只知道你应用程序的这一小部分

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


第四,通过你的电脑设置
id
道具是一种不好的习惯。如果可能,请不要这样做,并使用

您的代码中有一些错误:

首先是使用。我想你已经覆盖了它?我会选择
loadRecord()
并保持原样

var view = Ext.create('Campus.view.Test');
view.show(record); 
第二个是调用
Ext.apply()
,它在这里什么也不做。你根本不需要它

holder.add(Ext.apply(config));
因此,我想,在您的情况下,将一些逻辑直接放在视图中,而不是全部放在控制器中是完全可以的。但请注意,我只知道你应用程序的这一小部分

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


第四,通过你的电脑设置
id
道具是一种不好的习惯。如果可能,请不要这样做并使用

谢谢sra,是配置选项autoShow:true解决了问题:)谢谢sra,是配置选项autoShow:true解决了问题:)