title: Ext js component query
body: <p>I am developing web site in extjs4 + yii framework. I am using a border layout as a viewport. 
  Inside it I am using a accordian layout and displays home page. <strong>In Home page there is a login  window whcih i want to hide after ligin completion</strong>. how can i remove this window.
  here is my code:--</p>
  
  <pre><code>1)Viewport.js:-
  Ext.define('AM.view.Viewport', {
      extend: 'Ext.container.Viewport',
      layout: 'border',
      id:'vp',
      border: 5,
      style: {
          borderColor: 'red',
          borderStyle: 'solid'
      },
      requires: [
                 'AM.view.header.Header',
                 'AM.view.login.Login',
                 'AM.view.wordOfDay.WordOfDay',
                 'AM.view.weather.Weather',
                 'AM.view.poll.Poll',
                 'AM.view.qod.QOD',
                 'AM.view.history.History',
                 'AM.view.qod.LastQuestion'
                ],
  
  
      items: [
      {
          region:'north',
          xtype: 'headerHeader',
          margins:5,
          height:70,
          //html:'&lt;h1&gt;Welcome&lt;/h1&gt;',
      },
      {
      /*  title:'West',
          region:'west',
          margins:'0 5 0 5',
          flex:.3,
          collapsible:true,
          split:true,
          titleCollapse:true,
      */  
  
      //  title:'Main menu',
  
          region:'west',
          margins:'0 5 5 5',
          flex:.3,
          //collapsible:true,
          //titleCollapse:true,
          layout:'accordion',
          layoutConfig:
          {
                  animate:false,
                  multi:true
          },
          items:[
          {
              title:'wordOfDay',
              xtype:'wod' 
          },
          {
              title:'weather Information',
              xtype:'weather' 
          },
          {
              title:'poll of the day',
              xtype:'poll'
          },
          {
              title:'questionOfDay',
              xtype:'questionOfDay'
          }
          ]//end if items
  
      },
      {
          //title:'center',
          region:'center',
          html:'center region'
      },
      {
      /*  //title:'East',
          xtype:'loginLogin',
          region:'east',
          margins:'0 5 0 5',
          width:200,
          //collapsible:true,
          //collapsed:true,
      */
          region:'east',
          margins:'0 5 0 5',
          flex:.3,
          //collapsible:true,
          //titleCollapse:true,
          layout:'accordion',
          layoutConfig:
          {
                  animate:false,
                  multi:true
          },
          items:[
          {
              title:'Login Window',
              xtype:'loginLogin'
          },       
          {
              title:'QuestionOfDay',
              xtype:'questionOfDay'
          },
          {
              title:'Last Question And its answer',
              xtype:'lastQusetion'
          },
          {
              title:'This Day In a History',
              xtype:'history'
          }
          ]//end if items
      },
      {
          //title:'South',
          region:'south',
          margins:'0 5 5 5',
          flex:.1,
          html:'&lt;h6 align="center"&gt;Footer&lt;/h6&gt;',
          split:false
      },//mainMenu   // used mainMenu when you are using mainMenu variable
      ]//end if items
  });//End of view port
  
  2)Login.js :-- this is the login view page
  Ext.define('AM.view.login.Login',
  {
          extend:'Ext.form.Panel',
          id:'lg',
          alias:'widget.loginLogin',
          bodyStyle:'padding:5px 5px 0',
          title:'Login Window',
          hidden:false,
          height: 150,
          //items:
          //[
           //{
               //xtype:'form',
               border:3,
               items:[
                      {
                          xtype:'textfield',
                          fieldLabel:'Key In',
                          name:'uname',
                          //width:'10px',
                          anchor:'100%',
                          //flex:2,
                          //labelAlign:'top',               
                          //  cls:'field-margin',
                          allowBlank:false,
                          //minLength:6,
                          //draggable:true,
                      },
                      {
                          xtype:'textfield',
                          fieldLabel:'Key',
                          //width:'20px',
                          flex:6,
                          //labelAlign:'top',
                          name:'pass',
                          inputType:'password',
                          allowBlank:false,
                          minLength:6,
                          anchor:'100%',
  
                      },
                      {
                          xtype:'button',
                          formBind: true,
                          fieldLabel:'Keylogin',
                          action:'loginAction',
                          text:'login',
                          //width:'20px',
                          flex:6,
                          //labelAlign:'top',
  
                          anchor:'100%',
  
                      }
                      ],  
           //}],//end of items
  });//End
  </code></pre>
  
  <p>3) And here is some code in controller file </p>
  
  <pre><code>authenticateUser:function(button)
  {   
      console.log('enter');
      var obj = Ext.ComponentQuery.query('#vp');
  
      obj[0].remove('lg');
  }    
  </code></pre>
  
  <p>code is executing but is does not hides the login window.please give me suggestions..
  Thanks in advance.</p>