two window objects in extjs

I have these two windows defined as shown below. The functionality that I desire is that initially the grid window should be hidden and the login window should be shown. After the user logs in, the login window should be hidden and the grid window should be shown.

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:
                // Du开发者_Go百科mmy 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();
});

When I load the page, I get the error Ext.getcmp('grid') is undefined in firefox. Could someone please help me out here...

---

Your gridWindow only exists as an object literal (aka xtype config object) and is never 'instantiated' (created). Therefore Ext.getCmp cannot find it, because it doesn't 'exist' yet and hasn't been registered with Ext.ComponentManager.

You could add it to the Viewport and add hidden:true to its config definition so it doesn't show up.

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

Note: you might also need to call doLayout() on your viewport in your login handler after showing/hiding the components.

---

Looks like you first define LoginWindow.loginForm, but then redefine LoginWindow with a new object.

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

LoginWindow is now set to an object literal with one property loginForm.

{
    loginForm: [object]    
}

Followed by

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

This will create a completely new object and assign it to LoginWindow. The loginForm property is nowhere to be seen anymore ;)