[3.2] Trouble Dynamically Adding GridPanel to TabPanel

[mrapczynski]

Hello,

Like the post title says, I'm trying to dynamically add a grid panel to tab panel after loading JSON data via an AJAX request. Notes I'm using jQuery 1.4.2 + adapter + ext-all-debug. I've chosen to use jQuery directly to get my data rather make requests through the usual HTTP proxy and connection stack part of jQuery - ignore that part. Below is my code... should be simple to add a new tab. What am I doing wrong? The error I get in Firebug is:

item.getItemId is not a function
var existing = item.events ? (... item : null) : this.items.get(item);
ext-all-debug.js (line 45118)

function openCourseRoster(bannerterm, coursecrn) {
  $.post('./roster', {'term': bannerterm, 'crn': coursecrn}, function(data) {
    if(data != null) {
      var crsTabPanel = Ext.getCmp('tpCourses');
      crsTabPanel.insert(crsTabPanel.items.getCount(), new Ext.grid.GridView({
        id: ('roster_' + bannerterm + coursecrn),
        crn: coursecrn,
        term: bannerterm,
        title: 'Roster (' + coursecrn + ') (' + convertTermCodeToPretty(bannerterm) + ')',
        border: false,     
        enableHdMenu: false,
        enableColumnMove: false,
        stripeRows: false,
        columnLines: true,
        rowLines: true,
        
        store: new Ext.data.JsonStore({
          autoDestroy: true,
          autoLoad: true,
          root: 'roster',
          data: data,
          idProperty: 'cwid',
          fields: [            
            {name: 'cwid', type: 'string'},
            {name: 'fname', type: 'string'},
            {name: 'lname', type: 'string'},
            {name: 'email', type: 'string'},
            {name: 'phone', type: 'string'},
            {name: 'regstatus', type: 'string', sortType: sortTypeRegStatus},
            {name: 'add_date', type: 'date', dateFormat: 'm/d/Y'},
            {name: 'grade', type: 'string'},
            {name: 'dropwdraw_date', type: 'date', dateFormat: 'm/d/Y', sortType: sortTypeDate},
            {name: 'wlistpos', type: 'int'}
          ]/*,
          sortInfo: {field: 'lname', direction: 'ASC'}*/
        }),
        
        colModel: new Ext.grid.ColumnModel({
          defaults: {
            width: 120,
            sortable: true
          },
          
          columns: [            
            {header: 'Student ID', dataIndex: 'cwid', width: 85},
            {header: 'First Name', dataIndex: 'fname', width: 115},
            {header: 'Last Name', dataIndex: 'lname', width: 115},
            {header: 'E-Mail', dataIndex: 'email', width: 175, renderer: rndrFunctionNvlNa},
            {header: 'Phone', dataIndex: 'phone', width: 100, renderer: rndrFunctionNvlNa},
            {header: 'Status', dataIndex: 'regstatus', width: 100, renderer: rndrStudentStatus},
            {header: 'Add Date', dataIndex: 'add_date', width: 90, renderer: Ext.util.Format.dateRenderer('m/d/Y')},
            {header: 'Drop/Wdraw Date', dataIndex: 'dropwdraw_date', width: 122, renderer: Ext.util.Format.dateRenderer('m/d/Y')},        
            {header: 'Grade', dataIndex: 'grade', width: 60, renderer: rndrFunctionNvl},        
            {header: 'Wait Seq.', dataIndex: 'wlistpos', width: 80, renderer: rndrFunctionWaitlist}
          ]
        }),
        
        sm: new Ext.grid.RowSelectionModel({singleSelect:true})       
      }));
      
      //console.dir(newGridView);

      // This doesn't work....
      //crsTabPanel.add(newGridView);
      //crsTabPanel.activate(newGridView);
    }
  }); 
}

[evant]

Because you're adding a GridView, which isn't a component. You want a GridPanel.

[mrapczynski]

<teenager>
OMG!1!! Duh...
</teenager>

Thanks so much - problem instantly solved. Enjoy your weekend!