PDA

View Full Version : Strange width value for panel (10000)



tdikarim
24 Oct 2012, 5:40 AM
Hi All,

I have a panel in the north of my viewport
I use html for positionning background image (logo1 and logo2)

Problem1
The logo2 is never displayed because when i see in firebug the width of the panel value 10000

Problem2
When I resize the screen (firefox)the combo is never centered but conserve its position !
In Firebug the value always 10000

*************************************
*LOGO1 COMBO LOGO2*
*************************************



var panel_monoField = Ext.create('Ext.panel.Panel', {
title : false,
header : false,
headerCfg : false,
id:'panel_monoZone',
width: '100%',
height: 60,
bodyPadding: 0,
border: false,
style:'border-spacing: 0 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;',
items: [
{
layout: {
type: 'hbox',
align:'top',
width: '100%',
height: '60px'
},
defaults:{margins:'0 23 0 0'},
bodyStyle: 'width:100%; background-repeat: no-repeat; background-position: left; border-spacing: 0 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;',

html: '' +
'<table width="100%" height="60">' +
' <tbody>' +
' <tr height="60" valign="top" background="images/icones/HeaderBG.png";>' +
' <td width="100%"; valign="top" align="left">' +
' <table id="Tableau_Header" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">' +
' <tbody>' +
' <tr>' +
' <td width="50%" align="left" valign="center" background="images/icones/logo_ecom.png" style="background-repeat:no-repeat; ">' +
' </td>' +
' <td width="50%" align="right" background="images/icones/login_tab.png" style="background-repeat:no-repeat;">' +
' </td>' +
' </tr>' +
' </tbody>' +
' </table>' +
' </td>' +
' </tr>' +
' </tbody>' +
'</table>',
items:[
{
xtype:'tbspacer',
flex:1
},
{
xtype: 'combo',
id:'comboMonoZone',
store: ds_MonoZone,
displayField: 'title',
typeAhead: false,
hideLabel: true,
hideTrigger:false,
width:400,
padding:'23',

listConfig: {
loadingText: 'Recherche en cours ...',
emptyText: 'Aucun résultat trouvé.',

// Custom rendering template for each item
getInnerTpl: function() {
return 'RESULTAT : ' +
'{EEC_ORD_ID}';
}
},
pageSize: 10
}
,{
xtype:'tbspacer',
flex:1
}
]
}
]
});


Thanks for your help

Karim

scottmartin
24 Oct 2012, 6:06 AM
This difficult to say looking at your example. My first suggestion would be to use containers/image components and the desired layout instead of inserting an HTML table manually in the panel.

Scott.