Question

I have a problem I have been struggling with for quite a while now so hopefully someone can help me out here.

Say you have this DataView object:

Ext.define('Score.view.GameInfoPanel', {
    extend: 'Ext.DataView',

    config: {       
        store: {
            fields: ['Name', 'Score'],
            data: [
                {Name: 'test', Score: '1'},
                {Name: 'test2', Score: '100'}
            ]
        },
        itemTpl: '{Name} - {Score}',
        fullscreen: false
    }
});

I thought I could use an instance of this DataView on different Panels like this:

var gameInfo = Ext.create('Score.view.GameInfoPanel',  {
    xtype: 'gameInfo',
    scrollable: false,
    fullscreen: false,
    height: 100,
    flex: 2,
});


Ext.define('Score.view.PlayerView', {
    extend: 'Ext.Panel',
    xtype: 'playerview',

    requires: [
        'Score.view.GameInfoPanel'
    ],

    config: {
        title: 'Player Info',
        iconCls: 'user',

        layout: 'vbox',
        scrollable: true,

        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                id: 'toolbarId',
                title: 'Player Info',
            },
            {
                xtype: 'panel',
                html: 'before',
                flex: 1
            },
            gameInfo,
            {
                xtype: 'panel',
                html: 'after',
                flex: 3
            }
        ]
    }
});

When would show this panel in Safari I see that the DataView is in the page/panel but it is hidden. The problem is probably that x-item-hidden is set for this DataView instance. After struggling with this for hours I have no clue why this is and how to solve this. The only suggestions I could find is that I should set the height of the DataView and make it not scrollable. All of that does not seem to work. So any feedback would be very much appreciated!

Answer 1

It took a while but I finally solved it. There were a few problems with the initial code.

In the definition of the GameInfoPanel the configuration attribute ‘fullscreen’ should not be used. I am not exactly sure why. But from what I understood is that the view(s) in which this view is used already set this attribute. By setting it again, even when it is set to false, it will hide the view.

Furthermore the ‘xtype’ attribute should be set. In this case I set it to ‘gameinfo’. This is because you then can configure this view in the PlayerView. Also by setting the ‘id’ you can refer to this instance of the GameInfoPanel in your controller. So the PlayerView looks like this in the end:

Ext.define('Score.view.PlayerView', {
  extend: 'Ext.Panel',
  xtype: 'playerview',

  requires: [
      'Score.view.PlayerInfoPanel',
      'Score.view.GameInfoPanel'
  ],

  config: {
      title: 'Player Info',
      iconCls: 'user',
      layout: 'vbox',
      scrollable: true,

      items: [
          {
              docked: 'top',
              xtype: 'toolbar',
              id: 'toolbarId',
              title: 'Player Info'
          },
          {
              xtype: 'playerinfo',
              id: 'currentPlayerInfoId',
              flex: 1,
              scrollable: false
          },
          {
              xtype: 'gameinfo',
              id: 'currentGameInfoId',
              flex: 2,
              scrollable: false
          }
       ]
    }
});