[HELPED] Layout Issue

[melvig]

Hi,

I am having some problems with charts again, I want to render a chart within a container so I can add a title to it easily.

Attached is a copy of my viewport.js (viewport.txt) and screenshots of the result. The interesting thing is that initially the browser shows nothing (see screenshot 1) but if you minimise then maximise the browser forcing a render the charts appear as in screenshot 2.

I think this may be over nesting on my part, if you could have a look it would be much appreciated.

Thanks

[eweiler]

For starters, your buildItems is returning an item that has items, instead of just returning the items. That would mess up your expected layouts.

[melvig]

I have changed the code so it now looks like this...

buildItems: function() {
        return [{
//            items:[{
                xtype: 'panel',
                flex: 1,
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                items:[{
                    xtype: 'titlecontainer',
                    flex: 1.5,
                    title: 'Tasks by Status',
                    items: [{
                        xtype: 'panel',
                        items: [{
                            xtype: 'taskstatuschart'
                        }]
                    }]
                },{
                    xtype: 'titlecontainer',
                    flex: 1,
                    title: 'Pick Face Picks',
                    items: [{
                        xtype: 'panel',
                        items: [{
                            xtype: 'pickfacepickschart'
                        }]
                    }]
                }]
            },{
                xtype: 'instructiongrid',
                flex: 1.5
            }]
//        }];
    },

Still does not render correctly - please see attachments Screenshot 1a (initial render of app) and Screenshot 2a (after resize of browser)Screenshot 1a.jpgScreenshot 2a.jpg.

Thanks

[melvig]

I have managed to get this working by rendering the chart within the titlecontainer - it is not exactly what I wanted but it works.

Don't understand why the chart would not render in a panel though!

    buildItems: function() {
        return [{
            xtype: 'panel',
            flex: 1,
            layout: {
                align: 'stretch',
                type: 'hbox'
            },
            items:[{
                xtype: 'titlecontainer',
                flex: 1.5,
                margin: '0 6 6 0',
                title: iwmlit.charttasksbystatus,
                items: [{
                    xtype: 'taskstatuschart',
                    flex: 1
                }]
            },{
                xtype: 'titlecontainer',
                flex: 1,
                margin: '0 0 6 0',
                title: iwmlit.chartpickfacepicks,
                items: [{
                    xtype: 'pickfacepickschart',
                    flex: 1
                }]
            }]
        },{
            xtype: 'instructiongrid',
            flex: 1.5
        }]
    },

Thanks anyway

[eweiler]

Sorry to reply much later, just to venture a guess, your panel may have had no height at render time, and the flex caused no height? I'm not sure if stretch would or should have worked there though.