where did all these crazy widths come from? - Crazy for Feeling This Way: Catch-22 Redux - polala.com

Crazy for Feeling This Way: Catch-22 Redux::
Aug 21, 2007 You were just born that way -- or maybe your mother did it to you. . After all, you'd have to be crazy not to see the wisdom of the
http://www.chris-floyd.com/component/content/article/3/1263-crazy-for-feeling-this-way-catch-22-redux.htmlHOME

I create a Panel and inserted some html fragments inside.

var totalofText = {
id: 'total of',
html: 'total of',
style: 'width:90'
}
var count_query_SalesBySerialNumberText = {
html: '',
style: 'width:90'
}
var matchingrecordsText = {
id: 'matching records',
html: 'matching records',
style: 'width:90'
}
var SearchResultCountDm = [
totalofText,
count_query_SalesBySerialNumberText,
matchingrecordsText
];
var SearchResultCountPanel = new Ext.Panel( {
applyTo : 'SearchResultCount',
border: false,
labelAlign: 'right',
bodyStyle:'padding:5px 5px 0',
layout : 'table',
autoWidth : true,
autoHeight : true,
defaults : {
border: false,
bodyStyle:'padding:5px'
},
plain : true,

jellobelle Tissanky LiveJournal.com Profile Full LiveJournal.com ::
Where did these come from?! One minute I'm just sitting here and the next. . excuse - crazy bohemian hippie parents are known for that sort of thing.
http://jellobelle.livejournal.com/data/foafHOME

Gohn Crazy: Pennsylvania, a leader in puppy mills::
Where did we end up? Peach Bottom, Pennsylvania at a place called Puppy pay for all of the problems that come from over breeding and inbreeding of these
http://www.gohncrazy.com/2008/06/pennsylvania-leader-in-puppy-mills.htmlHOME

items : SearchResultCountDm
})

when html is rendered, the first and last html fragments have ok width, but the middle one where I created a div got rediculous width settings for both its parents: 590 and 600 px respectively.

I solved this one.

the trick is to be sure to add an id config param to each element. no idea what internal mechanism makes this a requirement.

A usual cause of ridiculous sizes in components is the use of the state manager. Since the cookies store the sizes associated with each component using the component's id (explicit or generated), this is prone to generate incorrent associations for components with dynamically generated ids, as you add/remove components during development.

So in this case you seem to have avoided this by attaching static ids to the components.

The clean solution would be: either remove the state cookies as you make changes, or disable the use of the state manager until the design is stabilized.

I think the table layout is struggling to make sense of your styles and code. You have not set a column total, then you are forcing the table to render into an existing element that has width=98%. I think the confused table layout is trying to fill the horizontal gap.

I solved this one.

the trick is to be sure to add an id config param to each element. no idea what internal mechanism makes this a requirement.

no, that wasn't it.

I added columns config param
var SearchResultCountPanel = new Ext.Panel( {
applyTo : 'SearchResultCount',
border: false,
labelAlign: 'right',
bodyStyle:'padding:5px 5px 0',
layout : 'table',
layoutConfig: {
columns: 3
},
autoWidth : true,
autoHeight : true,
defaults : {
border: false,
bodyStyle:'padding:5px'
},
plain : true,
items : SearchResultCountDm
})

and set the width to 300px. I still got the extreme width AND height settings

Part of this may be b/c you're applying trying to set the width via a style entry instead of just using the width config. I would imagine that if the width config is missing, the layout/rendering assumes it's doing auto and calculates things as it can. It's not going to parse the style config looking for a width. Then, the style will be added to the hmtl, potentially further confusing the issue.