PDA

View Full Version : 4.1 Custom light-weight container renders correctly but has wrong hight...



jsg2021
3 May 2012, 5:57 PM
I'm trying to create a custom container that has markup above the body. (or anywhere around it really) It renders and looks fine, except the hight is calculated as if my markup wasn't there...so the height is off, cutting off children or in the case its in a vbox, it doesn't overflow correctly...

what am I missing?

this a simplified example:


Ext.define('MyContainer',{
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',

renderTpl: [
'<div class="custom-tpl">...</div>',
'<div id="{id}-frameBody">',
'{%this.renderContainer(out,values)%}',
'</div>',
],


childEls: ['frameBody'],


initComponent: function(){
this.callParent(arguments);
this.renderData = Ext.apply(this.renderData||{},this.initialConfig);
}


});




Any help would be really helpful.

evant
3 May 2012, 6:23 PM
You'll need to use a body component layout:



Ext.define('MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',

renderTpl: ['<div class="custom-tpl">...</div>', '<div id="{id}-body">', '{%this.renderContainer(out,values)%}', '</div>', ],

componentLayout: 'body',


childEls: ['body'],

getTargetEl: function () {
return this.body;
},


initComponent: function () {
this.callParent(arguments);
this.renderData = Ext.apply(this.renderData || {}, this.initialConfig);
}


});

Ext.onReady(function () {
new MyContainer({
renderTo: document.body,
width: 300,
height: 200,
layout: 'fit',
items: [{
title: 'Foo'
}]
});
});

jsg2021
3 May 2012, 6:55 PM
Thanks. That did it.

However, I'm still struggling with the hight, but now its in this containers' parent. :/ (which is a regular unstyled panel)




new Ext.panel.Panel({
renderTo: Ext.getBody(), width: 400,
title: 'test', items: new MyContainer({
layout: 'auto',
items: [
{html: 'Foo'},
{html: 'Bar'},
{html: 'Baz'}]
})});

evant
3 May 2012, 7:25 PM
In this case you'll need a custom layout to also take into account the size of the tpl element when auto sizing:



Ext.define('MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',

renderTpl: ['<div id="{id}-tplEl" class="custom-tpl">...</div>', '<div id="{id}-body">', '{%this.renderContainer(out,values)%}', '</div>', ],

componentLayout: 'mylayout',


childEls: ['body', 'tplEl'],

getTargetEl: function () {
return this.body;
},

initComponent: function () {
this.callParent(arguments);
this.renderData = Ext.apply(this.renderData || {}, this.initialConfig);
}


});

Ext.define('MyLayout', {
extend: 'Ext.layout.component.Body',

alias: 'layout.mylayout',
type: 'mylayout',

calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
var height = this.callParent(arguments);
return height + ownerContext.target.tplEl.getHeight();
},

calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
var width = this.callParent(arguments);
return width + ownerContext.target.tplEl.getWidth();
},
})

Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
title: 'test',
items: new MyContainer({
items: [
{html: 'Foo'},
{html: 'Bar'},
{html: 'Baz'}
]
})
});
});

jsg2021
3 May 2012, 7:52 PM
thanks! that helped alot!