1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    96
    Answers
    1
    Vote Rating
    3
    jeremym is on a distinguished road

      0  

    Default Answered: vbox doesn't render if height not explicitly set, or hbox without width...

    Answered: vbox doesn't render if height not explicitly set, or hbox without width...


    I'm new to ext js and have been reading through several of the tutorials and examples, then trying to build simple mocks of my own to get a feel for the different features. Today I'm mucking around with layouts and ran into an odd issue... I'm nesting some panels within each other to make my desired layout... I've got a tabpanel at the top level that seems to be working fine, then within that a couple of tabs testing different components... my tree, table, and graph panels render as I expect them to... but the panel with the nested layout components doesn't unless I hard code height for my vbox and width for the hbox. I assume I'm overlooking some necessity of how nested layouts work and am hoping someone here can point me in the right direction. It appears when these attributes aren't set that the vbox assumes a height of 0 (the blue bar under my docked toolbar gets thicker than usual), and if the hbox doesn't have a width set then a thick blue bar appears along the left side of the screen, leading me to believe that it has 0 width. I'd like the components to be dynamic so that users in different browsers or screen resolutions aren't stuck to the same sizing scheme. I looked at the vbox example at http://dev.sencha.com/deploy/ext-4.0...yout/vbox.html and it doesn't seem to have this problem, though I wasn't able to comparatively pinpoint what I'm doing incorrectly using that source. Any tips would be greatly appreciated! I'm just a few days into this, so still getting my feet wet

    Thanks!

    Offending panel (with the height and width attributes in place, so it does render 'correctly'):

    Code:
    Ext.define('Proto.view.container.Dashboard', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dashboard',
    
        title: 'Dashboard',
    
        layout: 'fit',
        items: [
            {
                dock: 'top',
                xtype: 'toolbar',
                height: 20,
                items: {
                    xtype: 'component',
                    html: 'Toolbar'
                }
            },
            {
                xtype: 'panel',
                layout: 'vbox', 
                align: 'stretch',
                height: 400,
                items: [{
                    xtype: 'component',
                    html:  'topbox',
                    flex: 1
                },
                {
                    xtype: 'component',
                    html:  'midbox',
                    flex: 1
                },            
                {
                    xtype: 'panel',
                    layout: 'hbox',
                    width: 600,
                    flex: 1,
                    items: [{
                            xtype: 'component',
                            html: 'panel1',
                            align: 'stretch',
                            flex: 1
                        },
                        {
                            xtype: 'component',
                            html: 'panel2',
                            align: 'stretch',
                            flex: 1
                        },
                        {
                            xtype: 'component',
                            html: 'panel3',
                            align: 'stretch',
                            flex: 1
                        }
    
                    ]
    
                }]
            }
        ]
    
    });
    If I remove the height:400 or width:600 attributes then panels become invisible...

    And in case its relevant, the parent application level code (the contents of the other tabs don't seem relevant, so I've not included them):

    Code:
    Ext.Loader.setConfig({enabled:true});
    
    Ext.application({
        name: 'Proto',
    
        layout: 'fit',
    
        stores: ['TreeMetrics', 'PerformanceMetrics'],
        models: ['ChartData'],
        controllers: ['PerformanceController'],
    
        requires: ['Ext.chart.theme.Base',
               'Ext.chart.theme.Theme',
               'Ext.tab.*',
               'Proto.view.trees.BaseTree',
               'Proto.view.container.Dashboard'],    
    
        launch: function() {
            var tabPanel = Ext.createWidget('tabpanel', {
                renderTo: document.body,
                activeTab: 0,
                items: [
                {
                    title: 'Layout',
                    xtype: 'dashboard'
                },
                {
                    title: 'Tree',
                    xtype: 'basetree'
                },
                {
                    title: 'Table',
                    xtype: 'twocolumntable'
                },
                {
                    title: 'Graph',
                    xtype: 'linegraphpanel',
                    minHeight: 400,
                    minWidth: 400
                }]
            });
        }
    });

  2. Code:
    items: [
        {
            dock: 'top',
            ...
    I suspect you meant to use dockedItems for this first item.

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    jparril113 is on a distinguished road

      0  

    Default


    You may have a problem with using two items with fit. But I would guess that It's because Ext has no reason to give the boxes any size without height/width attr. sense the internal components don't have height/width either. try using a different layout with a flex of 1. I've never realy liked how fit worked anyway.

  4. #3
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,344
    Answers
    498
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Code:
    items: [
        {
            dock: 'top',
            ...
    I suspect you meant to use dockedItems for this first item.

  5. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    96
    Answers
    1
    Vote Rating
    3
    jeremym is on a distinguished road

      0  

    Default


    Thanks for the responses... I've worked around the issue more or less by getting rid of the fit layout and moving my vbox to the top level (rather than having a layout with the "toolbar" and the "contents" pieces being seperate items). The upside is that the various components do scale automatically to the size of their contents... the downside is that they don't scale to the size of the browser pane. I will try the dockeditems tag next (when I tried it after switching the vbox to the top level nothing rendered at all).

  6. #5
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    96
    Answers
    1
    Vote Rating
    3
    jeremym is on a distinguished road

      0  

    Default


    dockedItems (combined with moving up the vbox layout) worked , had a lowercase i on the first attempt, thanks so much!

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar