Thursday, January 8, 2009
where did all these crazy widths come from?
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,
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.
|
1
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
|
1
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.
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.
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 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.
#If you have any other info about this subject , Please add it free.# | |
Posted by admin |
|
|