Ext4 MVC - parent widgets not managing injected DOM elements

[foobarr]

I have an Ext4 application (using the MVC pattern), that asks common code to inject some DOM elements. The following is an outline of the code:


Ext.application({
// namespace, appFolder, controllers, etc....

launch: function() {

var vp = Ext.create('Ext.container.Viewport', {
suspendLayout : true,
items : [
{
xtype : 'form',
id : 'parent_ID',
items : []
},
// other Ext4 components created ....
],
});

new CommonCodeButton ({
// common code gets the parent DOM element and appendsChildren.
parentElementId : 'parent_ID',
// other properties ...
});

vp.suspendLayout = false;
vp.doLayout();

}, /* end launch() */
});

The injected elements are displayed, but the parent (Viewport) widget does not manage the geometry of the injected elements properly. If I edit the css properties after the initial render, the parent does not change accordingly.

So...am I missing something? Is there a way to get the parent to respond to changes to injected-children DOM geometry? Or does the Ext4 MVC pattern preclude this kind of DOM manipulation?

btw: we have (Ext3x code) that does this kind of DOM manipulation successfully.

Thanks in advance.

[mitchellsimoens]

You can specify the layout for the Viewport

[foobarr]

Sorry...in an effort to trim the code sample down, I left out the layout manager. I am using the following inside the viewport :


layout : {
type : 'vbox',
align : 'stretch',
},

[skirtle]

I don't think this is really anything to do with MVC vs non-MVC, it's just a question of layouts.

Ideally you should stick to using the built in layouts, it's much easier that way. I don't know what CommonCodeButton does but you'd probably be better off adding it as a child component of the form. If you want something simple to inject HTML then consider using an Ext.view.View (what ExtJS 3 called DataView). Alternatively you could consider using the data and tpl config options, or maybe even an autoEl.

If you want to stick with your current approach then you're going to have to take on a lot of the sizing logic yourself. Resizing the elements of the form will be handled by the framework as the form is taking part in the layout system but any child elements will be sized automatically by the browser, based on CSS. It that doesn't give you the desired effect then you'll have to listen for resize events and do the resizing manually.

If I read your question correctly then you're actually experiencing the converse problem: you're expecting the parent to be resized to fit the children. This is the opposite way round to the way the layouts are designed to work. It can be done but it takes manual effort, you're fighting against the natural way of doing things. If it doesn't work 'by magic' using CSS then you'd have to wait until after the elements are finished rendering then call methods on the surrounding components to tell them to resize/refresh as appropriate.