extjs中的两个窗口对象

我定义了这两个窗口，如下所示。我想要的功能是，最初应该隐藏网格窗口，并显示登录窗口。用户登录后，应隐藏登录窗口并显示网格窗口

var store = new Ext.data.Store({
    url: 'sheldon.xml',
    reader: new Ext.data.XmlReader({
        record: 'Item',
        fields: [
            {name: 'Title'},
            {name: 'Author'},
            {name: 'Manufacturer'},
            {name: 'ProductGroup'}
        ]
    })
});
LoginWindow = {};
gridWindow = {};
gridWindow.grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: "Title", width: 120, dataIndex: 'Title', sortable:true},
        {header: "Author", width: 180, dataIndex: 'Author', sortable: true},
    ],
    height:200,
    viewConfig: {
        forceFit:true
    }
});

gridWindow = {
    xtype: 'window',
    id: 'grid',
    title: 'Grid',
    anchor: '30% 25%',
    items:[gridWindow.grid],
    frame:true,
    layout:'card',
};
LoginWindow.loginForm = {
    xtype:'form',
    // url:'check.php',
    frame: true,
    labelAlign:'right',
    labelWidth: 70,
    items:[
        {
            xtype:'textfield',
            fieldLabel:'Username',
            anchor: '100%'
        },
        {
            xtype:'textfield',
            fieldLabel:'Password',
            inputType:'password',
            anchor: '100%',
        }
    ],
    buttons:[
        {
            text:'Login',
            handler:
                // Dummy function
                function(btn, objc) {
                    Ext.getCmp('loginwindow').hide();
                    Ext.getCmp('grid').show();
                    store.load();
                },
        },
        {
            text:'Cancel',
            handler:function(btn, objc) {
                btn.findParentByType('form').getForm().reset();
            }
        }
    ]
};
LoginWindow = {
    xtype: 'window',
    id: 'loginwindow',
    title: 'Please Log In',
    anchor: '30% 25%',
    activeItem: 0,
    items:[LoginWindow.loginForm],
    frame:true,
    layout:'card',
    bodyStyle:{}
};
Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        layout: 'anchor',
        items:[
            LoginWindow
        ]
    });
    Ext.getCmp('loginwindow').show();
    Ext.getCmp('grid').hide();
});

加载页面时，会出现错误

Ext.getcmp（'grid'）

在firefox中未定义。

---

有人能帮我一下吗…

看起来您首先定义了LoginWindow.loginForm，然后用一个新对象重新定义了LoginWindow

LoginWindow.loginForm = {
    xtype:'form',
    // url:'check.php',

LoginWindow

现在设置为具有一个属性的对象文本

loginForm

{
    loginForm: [object]    
}

接

LoginWindow = {
    xtype: 'window',
    id: 'loginwindow',

---

这将创建一个全新的对象并将其分配给

LoginWindow

。

loginForm

属性不再可见；）

您的

gridWindow

仅作为对象文本（也称为xtype-config对象）存在，并且从未“实例化”（创建）。因此，

Ext.getCmp

找不到它，因为它还不“存在”，也没有在

Ext.ComponentManager

中注册

您可以将其添加到视口中，并将

隐藏：true

添加到其配置定义中，使其不会显示

gridWindow = {
    xtype: 'window',
    id: 'grid',
    title: 'Grid',
    anchor: '30% 25%',
    items:[gridWindow.grid],
    frame:true,
    layout:'card',
};

Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        layout: 'anchor',
        items:[
            LoginWindow, gridWindow
        ]
    });
    // no need
    //Ext.getCmp('loginwindow').show();
    //Ext.getCmp('grid').hide();
});

---

注意：在显示/隐藏组件后，您可能还需要在登录处理程序的视口中调用doLayout（）。

和文章最后一行的

Ext.getcmp

有一个拼写错误，应该是

Ext.getcmp

。您的代码片段似乎正常（关于

Ext.getCmp

），但登录窗口按预期呈现。我的

Ext.getCmp（'grid'）

出现错误。哦，我现在明白了。

LoginWindow=

语句从右向左求值。将LoginForm指定为项，然后才覆盖LoginWindow变量引用。对不起，我弄错了。我不知道为什么只渲染“loginwindow”而不渲染“grid”窗口。我检查了dom，只能看到“loginwindow”，我刚刚发布了一个新答案。不过，我不会删除这一条，因为我认为它会对您有所帮助。就我个人而言，我建议根据我的观察改变你的编码风格。你以后可能会因此遇到问题。