Nesting UbergridPanel

[Scorpie]

So I just bought this awesome product but i'm having issues using this in an nested configuration.

I have a Tabpanel consisting of two panels in a vbox layout. However, whenever I run this the bottom one (the grid) is stuck to the bottom, not adhering the flex option. See my code for details:

Main tabpanel with the 2 panels configured as xtypes:

Code: Select all

Ext.define('MyApp.view.main.SearchAndRecentWorkTabPanel', {
  extend : 'Ext.tab.Panel',
  xtype : 'searchandrecentworktabpanel',

  config : {
    items : [{
      xtype : 'container',
      title : 'Tab 1',
      layout : {
        type : 'vbox'
      },
      items : [{
        xtype : 'omnisearchformpanel',
        flex : 1
      }, {
        xtype : 'omnisearchresultpanel',
        flex : 1
      }]
    }, {
      xtype : 'container',
      title : 'Tab 2'
    }, {
      xtype : 'container',
      title : 'Tab 3'
    }]
  }

}); 

The omnisearchresultpanel xtype is as follows:

Code: Select all

Ext.define('MyApp.view.main.OmniSearchResultPanel', {
  extend : 'UberGrid.Panel',
  xtype : 'omnisearchresultpanel',
  id : 'omnisearchResultPanel',

  requires : ['MyApp.store.SearchResult'],

  rowHeight : 30,

  columns : [{
    header : 'Id',
    dataIndex : 'Id',
    width : 60,
    cellCls : 'id',
    renderer : function(value, meta, record) {
      return value + '.'
    }
  }, {
    header : 'Name',
    dataIndex : 'Title',
    flex : 1
  }, {
    xclass : 'UberGrid.column.Date',
    header : 'Start Date',
    dataIndex : 'StartDate',
    format : 'M d G:i',
    width : 200,
    cellCls : 'some-date'
  }, {
    xclass : 'UberGrid.column.Template',
    header : 'Location',
    width : 250,
    template : '<img class="venue-icon" src="{LocationIcon}"/><span class="venue-name">{Location}</span>'
  }],

  store : new Ext.data.Store({
    autoLoad : true,
    model : 'MyApp.model.SearchResult',
    proxy : {
      type : 'ajax',
      url : 'mockup/data.json',
      reader : {
        type : 'json'
      }
    }
  }),
  
  constructor: function(){
    this.callParent();
  }
  
});

And the top xtype 'omnisearchformpanel' is as follows:

Code: Select all

Ext.define('MyApp.view.main.OmniSearchFormPanel', {
    extend: 'Ext.form.Panel',
    xtype: 'omnisearchformpanel',
    id: 'omnisearchFormPanel',
    
    config:  {
        title : Ext.i18n.Bundle.getMessageValue('MyApp.main.label.omnisearchformpanel.title'),
        cls: 'omniSearchFormPanel', 
        xtype : 'formpanel',
        layout : {
          align : 'center',
          type : 'vbox'
        },
        items : [{
          xtype: 'fieldset',
          width: '100%',
          instructions: Ext.i18n.Bundle.getMessageValue('MyApp.main.label.omnisearchbox.instructions'),
          border: false,
          layout : {
            type : 'vbox',
            align : 'center'
          },
          items: [{
            id: 'omniSearchField',
            xtype : 'textfield',
            placeHolder: Ext.i18n.Bundle.getMessageValue('MyApp.main.label.omnisearchbox.field.instruction'),
            plugins: [
              new MyApp.plugins.InputMask({
                maskRegex: "regex comes here", // regex to apply, in combination with the callback
                callback: function(args){}, // use this to handle the callback coming from the maskregex above
                validationRegex: "regex comes here"
              })
            ],
            margin : '50 0 0 0',
            width : '95%',
            cls : 'omniSearchBox'  
          }]
        }]
      }
      

});

And the screenshot of what happens:


http://i.imgur.com/IFGupmZ.png

FYI I'm running on ST 2.2 RC1, and tested it on ST 2.1. Same behaviour occured. If anybody can point me in the right direction I would be grateful

[mats]

Not a good idea to put store instance on a _class_ definition, better you move your configs to the 'constructor'. Do you get any errors or warnings? If you replace UG with a plain panel, do you get what you expect then?

[Scorpie]

Yeah the store should be moved, its legacy code while trying out different approaches.
If I switch to a default panel with this:

Code: Select all

{
        //xtype : 'omnisearchresultpanel',
        xtype: 'panel',
        flex : 1,
        html: 'plain text'
      }

The flex attribute works and the parent panel is cut nicely in half with both panels taking up a half each.

[Scorpie]

Also, if I call upon the gridpanel directly (by adding it to the viewport) it displays nicely, with data. If I put it in a container of any sorts, the headers are shown but no data is shown.

[nickolay]

In your MyApp.view.main.OmniSearchResultPanel's constructor:

Code: Select all

  constructor: function(){
    this.callParent();
  }

should be

Code: Select all

  constructor: function(){
    this.callParent(arguments);
  }

To pass the provided configuration to the parent constructor.

[Scorpie]

In your MyApp.view.main.OmniSearchResultPanel's constructor:

Code: Select all

  constructor: function(){
    this.callParent();
  }

should be

Code: Select all

  constructor: function(){
    this.callParent(arguments);
  }

To pass the provided configuration to the parent constructor.

OMG, stupid mistake. Works like a charm thanks!