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:
        				// 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();
    });
When I load the page, I get the error `Ext.getcmp('grid')` is undefined in firefox.
Could someone please help me out here...
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:
        				// 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();
    });
When I load the page, I get the error `Ext.getcmp('grid')` is undefined in firefox.
Could someone please help me out here...