Grids in Ext.TabPanels

JavaScript
Document (8)
Events (8)
ExtJS (9)
Strings (3)

Grids in Ext.TabPanels

This article has not been rated yet. After reading, feel free to leave comments and rate it.

Question:

My Ext.TabPanel has grids in each tab (2 tabs total) and only the grid on the first tab renders. The second tab stays empty. This is in the 'Ext Desktop' environment. If I minimize the controlling element and restore it to regular size, then the 2nd panel gets rendered.

Answer:

1) Try property layoutOnTabChange : true - this is a property of the TabPanel. It worked in my case.
2) I found this solution (?), which is actually more of a work-around. First portion does not work. Second version does work.

// this one does not work in my case

new Ext.TabPanel({
  activeTab:0,
  defaults:{autoHeight: true, autoScroll: true},
  items:[{
     title: 'Defined',
     items: qtgrid1
  },{
     title: 'Undefined',
     listeners: {activate: function() {
       // some code
     }},
     items: qtgrid2
  }]
})


// here I save the intermediate container, and this tab panel renders fine.
// However, I do not get to set the caption of the tab sheets. As a result, 
// the tab sheets have empty caption and look very small.

new Ext.TabPanel({
  activeTab:0,
  defaults:{autoHeight: true, autoScroll: true},
  items:[
    qtgrid1,
    qtgrid2
  ]
})

Send a message to
Subject

Comments:

NEW: Optional: Register Login Email address (not necessary): Rate as	Hide my email when showing my comment. Please notify me once a day about new comments on this topic. Please provide a valid email address if you select this option, or post under a registered account.

	Show city and country Show country only Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:
Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity. The owner of this web site reserves the right to delete such material. Add a picture:


	Search: