PDA

View Full Version : What's the story with ux.center?



dr-dan
4 Oct 2012, 2:17 AM
I have copied the source from the Sencha examples for the ux.center layout

Been scratching my head as nothing gets set on the panel specifically the css from the following code:


Ext.define('Ext.ux.layout.Center', {
extend: 'Ext.layout.container.Fit',
alias: 'layout.ux.center',
// private
setItemSize: function (item, width, height) {
this.owner.addCls('ux-layout-center');
item.addCls('ux-layout-center-item');
if (item && height > 0) {
if (width) {
width = item.width;
if (Ext.isNumber(item.widthRatio)) {
width = Math.round(this.owner.el.getWidth() * item.widthRatio);
}
}
item.setSize(width, height);
}


},
finishedLayout: function (ownerContext) {
this.callParent(arguments);
alert('yes i do get here');
}
});

Which is not surprising as setItemSize() never gets called.

this is my app launch() snippet:


var p = Ext.create('Ext.panel.Panel', {
id: 'center-panel',
layout: 'ux.center',
renderTo: document.body,
items: {
title: 'Centered Panel: 75% of container width and fit height',
layout: 'ux.center',
autoScroll: true,
widthRatio: 0.75,
bodyStyle: 'padding:20px 0;',
items: [{
title: 'Inner Centered Panel',
html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
frame: true,
autoHeight: true,
bodyStyle: 'padding:10px 20px;'
}]
}
});
What have I missed?

mitchellsimoens
10 Oct 2012, 9:11 AM
Using 4.1.2 this works for me:


Ext.create('Ext.Panel', {
renderTo : document.body,
height : 400,
width : 400,
title : 'Center Layout',
layout : 'ux.center',
items : [
{
title : 'Centered Content',
width : '75%', // assign 75% of the container width to the item
html : 'Some content'

}
]
});

dr-dan
14 Oct 2012, 5:37 AM
I'd copied the 4.0 ux.center code which is different to the ux.center 4.1 code and with a bit of bug fixing on my container, got it working...