View Full Version : [3.2] Trouble Dynamically Adding GridPanel to TabPanel

1 Jul 2010, 7:24 PM

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


// This doesn't work....

1 Jul 2010, 9:51 PM
Because you're adding a GridView, which isn't a component. You want a GridPanel.

2 Jul 2010, 7:14 AM
OMG!1!! Duh...

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