PDA

View Full Version : Text wrapping/box layout problem



kevinsmotherman
10 Mar 2011, 6:42 AM
I have a panel that consists of an hbox with two components. The left component is simple text, the right component is a vbox with two components - the top component performs spacing so that the bottom component is rendered at the bottom of the container. The problem is the text in the left component of the hbox wraps, but is truncated. It almost appears as if the height being calculated is based on the parent container width, instead of the hbox component flex:



Ext.define('CsgPrepaid.views.ProblemTestWidget', {
extend: 'Ext.Panel',
width: 200,
createProblem: function() {
var details = [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretchmax'
},
items: [{
xtype: 'component',
flex: 69,
html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 31,
items: [{
xtype: 'component',
flex: 1
},{
xtype: 'container',
layout: {
type: 'vbox'
},
items: [{
xtype: 'component',
flex: 1
},{
xtype: 'component',
html: Ext.util.Format.usMoney(0)
}]
}]
}]
}];
return details;
},

initComponent: function() {
var config = {
title: 'Problem Test',
items: this.createProblem()
};
Ext.apply(this, config);
this.callParent(arguments);
}

});

Ext.onReady(function() {
var pw = Ext.create('CsgPrepaid.views.ProblemTestWidget', {
});
pw.doComponentLayout();
pw.render(Ext.getBody());
});

kevinsmotherman
14 Mar 2011, 5:36 AM
No one else has seen this?