extjs中的两个窗口对象

Question

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

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中未定义。 有人可以在这里帮我吗...

Answer 1

您的gridWindow仅作为对象文字（也称为xtype配置对象）存在，并且从不“实例化”（创建）。 因此Ext.getCmp找不到它，因为它尚未“存在”并且尚未向Ext.ComponentManager注册。

您可以将其添加到视口，并在其配置定义中添加hidden: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（）。

Answer 2

看起来您首先定义了LoginWindow.loginForm，但是随后使用新对象重新定义了LoginWindow。

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

现在将LoginWindow设置为具有一个属性loginForm的对象文字。

{
    loginForm: [object]    
}

其次是

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

这将创建一个全新的对象并将其分配给LoginWindow 。 loginForm属性已无处可见；）