PDA

View Full Version : html element is not visible inside FormPanel



jumpow
21 May 2013, 4:25 AM
Text of html element is not visible if it is inside FieldSet
{ html: 'Text in FieldSet', border:1, width: 270, height:30 }

Element
{ html: 'Text in FormPanel', border:1, width: 270, height:30 }
in FormPanel is visible.

I use ExtJS 4.2.0.663
--------------------------------------------------------------------------------

Ext.onReady(function()
{
var aggParams = Ext.create('Ext.form.FieldSet',
{
title: '????????? ??????????? ??????',
collapsible: false,
width: 280,
margins: '4 4 4 4',
defaults:
{
labelWidth: 89,
anchor: '100%',
layout:
{
type: 'vbox',
defaultMargins: {top: 0, right: 0, bottom: 0, left: 0}
}
},
items:
[
{
xtype: 'checkbox',
boxLabel: '?????????? ???????? ????',
name: 'ShowMenu',
checked: true,
inputValue: 'ShowMenu'
},
{
html: 'Text in FieldSet', border:1, width: 270, height:30
},
{ xtype: 'container',
layout: "hbox",
width: '100%',
align: 'right',
margins: '4 4 4 4',
items: [
{
html: ' ', width: '25%', height:30, border: 0
}

]
}
]
});
var panel = new Ext.FormPanel(
{
id:'StFORM',
target: 'Report',
action: 'Report',
title : '?????? Inbound IVR',
//width : '100%', height: '98%',
layout: 'vbox',
renderTo : 'SJPageMenu',
method: 'post',
style: 'background-color: #f3f0f3;',
standardSubmit:true,
//align : 'stretch',
//pack : 'start',
tools:
[
{type : 'help'},
{type : 'search'}
],

items:
[
{
html: 'Text in FormPanel', border:1, width: 270, height:30
},
aggParams
]
});
});

friend
21 May 2013, 5:53 AM
Your code sample worked correctly for me in Firefox 19.0.2, Internet Explorer 8.0.7601.17514, and Chrome 26.0.1410.64.

Is there any particular browser/version that's not working correctly for you?

Keep in mind that I didn't have any config/code to represent the SJPageMenu item referenced in your renderTo configuration, so I added a <div id="SJPageMenu"></div> to the body of my HTML test document.

jumpow
21 May 2013, 11:25 PM
Very strange...
IE8, FireFox 20.0.1, Google Chrome 26.0.1410.64 m
All produce the same.

Full page code:
<HTML xmlns='http://www.w3.org/1999/xhtml'>
<HEAD><TITLE>IVR Statistic</TITLE>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
<script type='text/javascript' src='extjs/ext-all-debug.js'></script>
<script type='text/javascript'>
.... script code ...
</script>
</HEAD>
<BODY>
<div id='SJPageMenu'></div>
</BODY></HTML>


When I look at code result (IE8), I see
<div class="x-panel x-panel-default" id="panel-1018" style="width: 258px; height: 30px;">
<div style="position: relative;"/>
<div class="x-panel-body x-panel-body-default x-box-layout-ct x-panel-body-default" id="panel-1018-body" style="width: 258px; height: 30px; top: 0px; left: 0px;">
<div class='x-box-inner' id="panel-1018-innerCt" role="presentation" style="width: 0px; height: 28px;">
<div class="x-box-target" id="panel-1018-targetEl" style="width: 0px;">
rendered text
</div>
</div>
</div>
</div>
If I delete class='x-box-inner' from this code, I see text.