Nesting UbergridPanel

Questions related to our Sencha Touch based grid component
Post Reply
User avatar
Scorpie
Posts: 5
Joined: Tue Apr 23, 2013 3:17 pm

Nesting UbergridPanel

Post by 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:

Image
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 :)

User avatar
mats
Core Developer
Core Developer
Posts: 16692
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Nesting UbergridPanel

Post by 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?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
Scorpie
Posts: 5
Joined: Tue Apr 23, 2013 3:17 pm

Re: Nesting UbergridPanel

Post by 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.

User avatar
Scorpie
Posts: 5
Joined: Tue Apr 23, 2013 3:17 pm

Re: Nesting UbergridPanel

Post by 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.

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Nesting UbergridPanel

Post by 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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Scorpie
Posts: 5
Joined: Tue Apr 23, 2013 3:17 pm

Re: Nesting UbergridPanel

Post by Scorpie »

nickolay wrote: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!

Post Reply