Results 1 to 3 of 3

Thread: [3.2] Trouble Dynamically Adding GridPanel to TabPanel

  1. #1
    Ext JS Premium Member mrapczynski's Avatar
    Join Date
    Sep 2007
    Location
    Foothill-De Anza College District
    Posts
    50

    Question [3.2] Trouble Dynamically Adding GridPanel to TabPanel

    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)
    Code:
    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);
        }
      }); 
    }

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Because you're adding a GridView, which isn't a component. You want a GridPanel.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member mrapczynski's Avatar
    Join Date
    Sep 2007
    Location
    Foothill-De Anza College District
    Posts
    50

    Thumbs up

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

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

Similar Threads

  1. how dynamically adding row to GridPanel
    By hamdy in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Mar 2009, 4:16 AM
  2. Dynamically adding row to GridPanel
    By strider007 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Oct 2008, 10:03 AM
  3. Dynamically adding a GridPanel to a FormWindow
    By stratboogie in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 18 Jul 2008, 7:21 AM
  4. Dynamically adding tabs to TabPanel
    By OriginalCopy in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 30 Apr 2008, 12:39 PM
  5. Adding a panel dynamically to a tabpanel
    By JanL in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 14 Mar 2008, 9:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •