title: Re-rendering .ascx page with extjs
body: <p>I need to dynamically add a column to a page that has already been loaded. The column is represented by an object that is created AFTER the .ascx page is loaded (via user interaction). On the JavaScript side of things, I have a Panel with a TabPanel:</p>
  
  <pre><code>var reportPanel = new Ext.Panel({
      layout: 'fit',
      items: [
          new Ext.TabPanel({
              id: 'reportTabs',
              renderTo: 'reportTabContainer',
              activeTab: 0,
              autoHeight: true,
              minHeight: 600,
              plain: true,
              stateful: true,
              deferredRender: false,//allows both reports to run at once
              defaults:
                  {
                      autoHeight: true
                  },
              items: tabsConfig
          })
      ]
  });
  </code></pre>
  
  <p>};</p>
  
  <p>an item in tabsConfig looks like this:</p>
  
  <pre><code>{{ id: 'totalOperation', title: 'Total Operation', autoLoad: {{url: '" +Url.Action("Detail","OverallReport") +"', params: 'null', scripts: true,  timeout: '9000000', method: 'POST'}}
  </code></pre>
  
  <p>My problem is that once the column object has been created, I need to re-render the ascx page (aka the extJSpanel) after a specific AJAX call. I have tried <code>panel.removeAll(true)</code> as well as <code>panel.doLayout(false,true)</code>, and that does not remove any of the elements in the panel, or refresh the page. </p>
  
  <p>In short--I need to destroy an .ascx page before an AJAX call to the controller, and let the return of the AJAX call re-populate the ascx control (using <code>return PartialView(...)</code> ).
  Any suggestions would be greatly appreciated.</p>