DelphiFAQ Home Search:
General :: Web publishing :: JavaScript :: ExtJS


Articles:

This list is sorted by recent document popularity (not total page views).
New documents will first appear at the bottom.

Featured Article

Grids in Ext.TabPanels

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

Generated 8:02:20 on Feb 20, 2017