PDA

View Full Version : Dynamically Added Elements within Viewport do not resize correctly on browser resize



Admje14
28 Jun 2013, 5:02 AM
Ok, so I've got a situation where I am following the MVC pattern to run my application. Specifically, I am wanting to render a custom list of data. I am extending Panel for my View, and I am waiting for the store to complete loading, then I add the corresponding elements to the Panel's item collection, followed by a doLayout(). This all works fine. However, I have run into an issue where when the browser resizes, it does not automatically resize my elements.

Here is an example I threw together that seems to show my issue while being as small and streamlined as possible:



function initResizeTest() {

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'ResizeTest',

launch: function() {
var x = Ext.create('Ext.panel.Panel', {
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'label',
flex: 1,
text: 'Due Tomorrow'
},
{
xtype: 'label',
text: '2'
}
]
})

var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: []
});

viewport.items.add(x);
viewport.doLayout();
}
});
}


If I put x in viewport's items config when creating it, then everything works fine. However, when I add it in the manner shown above, then it won't resize correctly along with the browser.

Can anyone help?

Thanks!

friend
28 Jun 2013, 5:19 AM
I'm fairly certain that a Viewport configuration must include at least one container. A simple solution is to configure your Viewport like so:



var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container'
}]
});


You can then later add() new panels/content items, then do a remove() of the empty container().

Also, you do not need to manually make any calls to doLayout().

tvanzoelen
28 Jun 2013, 5:23 AM
Could you try


viewport.add(x);

the add function handles some layout issues for you.

Adding directly on the items array never worked for me.

Admje14
28 Jun 2013, 5:31 AM
@friend - thanks for the suggestion, but I actually have an actual container that I'm adding the elements to in my real code. I just stripped it out for this example to make the example as simple as possible, so I don't think that is it. I had worked around the issue by doing a remove of all the items, then re-adding them, which is similar to what you were suggesting. The reason I didn't want to remove the Panel is that my entire view was extending Panel.

@tvanzoelen - that worked! thanks!!!!