DataView works on it's own in fullscreen mode but not inside a Panel

[cawoodm]

Just trying to understand DataViews - they only seem to work as fullscreen items and not embedded anywhere (Chrome 15).

The documentation example here shows a DataView in fullscreen mode and it works for me - I get a list:

Ext.setup({ onReady: function(){
 
  var obj1 = new Ext.Panel({
   html: '© Marc Cawood 2011',
  });


 var obj2 = Ext.create('Ext.DataView', {
    fullscreen: true,
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie',  age: 100},
            {name: 'Rob',   age: 21}
        ]
    },
    itemTpl: '<div>{name} is {age} years old</div>'
 });
 } // onReady


});

If I remove the fullscreen attribute and embed it in one of my panels it doesn't work at all - blank panel:

Ext.setup({ onReady: function(){
 
  var obj1 = new Ext.Panel({
   html: '© Test 2011',
  });

 var obj2 = Ext.create('Ext.DataView', {
    //fullscreen: true,
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie',  age: 100},
            {name: 'Rob',   age: 21}
        ]
    },
    itemTpl: '<div>{name} is {age} years old</div>'
 });

  Ext.create('Ext.Container', {
   fullscreen: true,
   layout: 'hbox',
   items: [obj2]
   });


 } // onReady


});

Now, if I change this line:

   items: [obj2]

to

   items: [obj1]

It works as expected, my footer obj1 "Test 2011" is displayed. So it looks like obj2 (i.e. DataView) is not embeddable??

[mitchellsimoens]

You are using HBox layout so if you specify the flex or width property on the DataView that is embedded into the fullscreen Container, it should work. Just right now there is no width so it's zero pixels wide.

[cawoodm]

Thanks. setting flex or width works. It's not very logical to me why normal HTML sizes to fit whilst the DataView defaults to 0px but I'm new to this stuff. However I wonder where you see 0px: when I inspect my DOM (without specifying width or flex) I find my data inside a 47px wide (though still empty) div....