Extjs gridpanel doesn't expand horizontally within a tabPanel

extjs tabpanel gridpanel
josh picture josh · Nov 12, 2009 · Viewed 13.9k times · Source

Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.

The each grid's properties:

  id: grid_id,
  ds: ds,
  cm: cm,
  loadMask:      true,
  view:          grouping_view,
  plugins:       [expander, filters],
  stateId:       which + '-grid-stateId',
  stateful:      true,
  stateEvents:   ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
  selModel:      checkbox,
  // height:        400,
  width:         GRID_WIDTH,
  defaults:      {autoHeight: true},
  autoHeight:    true,
  collapsible:   false,
  animCollapse:  false,
  layout:        'fit',

TabPanel's properties:

  id:         'tab_panel',
  renderTo:   'tabs',
  activeTab:  0,
  enableTabScroll:  true,
  defaults:   {autoScroll:true, authHeight:true},
  plugins:    new Ext.ux.TabCloseMenu(),
  width:      GRID_WIDTH + 2,
  autoHeight: true,
  items: [       // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them
     owned_grid,
     managed_grid,
     subscribed_grid
  ],

Answer

Jason picture Jason · Nov 12, 2009

Layout is not a valid property for a GridPanel.

Try using:

viewConfig: { forceFit: true }

instead

Related questions

In the tabpanel of ExtJS 4, how to catch the tabchange event anytime I click a tab?

For each tab in the tabpanel, I have one floating panel located in a fixed spot. When I switch the tabs, I need to bring the corresponding floating panel to the front. However, the tabchange event is fired only the …

Read More
How to get height of Ext.Panel to fill parent area

I have the following Ext.TabPanel: var modules_info_panel = new Ext.TabPanel({ activeTab: 0, defaults:{autoScroll:true}, //layout: 'fit', // makes component disappear viewConfig: { forceFit: true //has no effect }, // height: auto, //error "auto isn't recognized" items:[{ title: 'Section 1', html: 'test' },{ …

Read More
Javascript how to parse JSON array

I'm using Sencha Touch (ExtJS) to get a JSON message from the server. The message I receive is this one : { "success": true, "counters": [ { "counter_name": "dsd", "counter_type": "sds", "counter_unit": "sds" }, { "counter_name": "gdg", "counter_type": "dfd", "counter_unit": "…

Read More