1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    cawoodm is on a distinguished road

      0  

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

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


    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:
    Code:
    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:
    Code:
    Ext.setup({ onReady: function(){
     
      var obj1 = new Ext.Panel({
       html: '&copy; 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:
    Code:
       items: [obj2]
    to
    Code:
       items: [obj1]
    It works as expected, my footer obj1 "Test 2011" is displayed. So it looks like obj2 (i.e. DataView) is not embeddable??

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    cawoodm is on a distinguished road

      0  

    Default OK

    OK


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

Thread Participants: 1

Tags for this Thread