[solved] combobox in pagingtoolbar not showing

[rblon]

I have a grid with pagingtoolbar which has a right-aligned combobox. And the grid itself is part of a portlet (see portal demo). This works fine, unless I initially have the portlet hidden. In that case, when I unhide the portlet, the combobox remains unvisible.

I have adapted the portal demo to show this. Below is portal.js within bold the changes to get a show/hide button for the grid portlet

Ext.onReady(function(){

  // create some portlet tools using built in Ext tool ids
  var tools = [{
    id:'gear',
    handler: function(){
      Ext.Msg.alert('Message', 'The Settings tool was clicked.');
    }
  },{
    id:'close',
    handler: function(e, target, panel){
      //panel.ownerCt.remove(panel, true);
      panel.hide();
    }
  }];

  var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
      region:'west',
      id:'west-panel',
      title:'West',
      split:true,
      width: 200,
      minSize: 175,
      maxSize: 400,
      collapsible: true,
      margins:'35 0 5 5',
      cmargins:'35 5 5 5',
      layout:'accordion',
      layoutConfig:{
        animate:true
      },
      items: [{
        html: Ext.example.shortBogusMarkup,
        title:'Navigation',
        autoScroll:true,
        border:false,
        iconCls:'nav'
      },{
        title:'Settings',
        html: Ext.example.shortBogusMarkup,
        border:false,
        autoScroll:true,
        iconCls:'settings'
      }]
    },{
      xtype:'portal',
      region:'center',
      margins:'35 5 5 0',
      items:[{
        columnWidth:.33,
        style:'padding:10px 0 10px 10px',
        items:[{
            id: 'grid-portlet',
            //hidden: true,
          title: 'Grid in a Portlet',
          layout:'fit',
          tools: tools,
          items: new SampleGrid([0, 2, 3])
        },{
          title: 'Another Panel 1',
          tools: tools,
          html: Ext.example.shortBogusMarkup
        }]
      },{
        columnWidth:.33,
        style:'padding:10px 0 10px 10px',
        items:[{
          title: 'Panel 2',
          tools: tools,
          html: Ext.example.shortBogusMarkup
        },{
          title: 'Another Panel 2',
          tools: tools,
          html: Ext.example.shortBogusMarkup
        }]
      },{
        columnWidth:.33,
        style:'padding:10px',
        items:[{
          title: 'Panel 3',
          tools: tools,
          html: Ext.example.shortBogusMarkup
        },{
          title: 'Another Panel 3',
          tools: tools,
          html: Ext.example.shortBogusMarkup
        }]
      }]
   }]
  });
    
  new Ext.Button({
    text: 'Show/Hide',
    handler: function() {
      var grid = Ext.getCmp('grid-portlet');
      grid.setVisible(!grid.isVisible());
    }
  }).render(Ext.getBody());
});

Further, I have changed sample-grid.js to add a pagingtoolbar with a right-aligned combobox. Changes again in bold (I have moved store initialization out of the constructor, not highlighted though).

SampleGrid = function(limitColumns){

  function italic(value) {
    return '<i>' + value + '</i>';
  }

  function change(val) {
    if(val > 0) {
      return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
      return '<span style="color:red;">' + val + '</span>';
    }
    return val;
  }

  function pctChange(val){
    if(val > 0){
      return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
      return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
  }

  var columns = [
    {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ];

  // allow samples to limit columns
  if(limitColumns){
    var cs = [];
    for(var i = 0, len = limitColumns.length; i < len; i++){
      cs.push(columns[limitColumns[i]]);
    }
    columns = cs;
  }

  var store = new Ext.data.Store({
    reader: new Ext.data.ArrayReader({}, [
      {name: 'company'},
      {name: 'price', type: 'float'},
      {name: 'change', type: 'float'},
      {name: 'pctChange', type: 'float'},
      {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]),
    data: [
      ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
      ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
      ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
      ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
      ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
      ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
      ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
      ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
      ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
      ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
      ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
      ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
      ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
      ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
      ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
      ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
      ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
      ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
      ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
      ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
      ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
      ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
      ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
      ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
      ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
      ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
      ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
      ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
      ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ]
  });

  var comboBox = new Ext.form.ComboBox({
    mode: 'local',
    store: new Ext.data.ArrayStore({
      fields: ['myId', 'displayText'],
      data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText',
    width: 70
  });

  var pagingToolbar = new Ext.PagingToolbar({
    store: store,
    pageSize: 100,
    items: [
      '->',
      comboBox
    ]
  });

  SampleGrid.superclass.constructor.call(this, {
    store: store,
     bbar: pagingToolbar,
    columns: columns,
    autoExpandColumn: 'company',
    height: 250,
    width: 600
  });
}

Ext.extend(SampleGrid, Ext.grid.GridPanel);

This should work fine (at least if you have enough screenwidth, otherwise there might be not enough room for the standard pagingtoolbar items and the combobox).

Now if you uncomment "hidden: true:" in portal.js, re-load and click the "Show/Hide" button, it will not show the combobox.

Any thoughts on what is the problem would be much appreciated.

[rblon]

aarghhh, only realize now it is similar to another problem I recently had. Changing hideMode is again the solution...

  ...
  id: 'grid-portlet',
  hidden: true,
  hideMode: 'offsets',
  title: 'Grid in a Portlet',
  ...