Layout 'table' not valid working in window for 'input' components.
See example. Panel in body - ok. Panel in window - bad.
bug_input_win_2013-01-03_192557.png
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-beta/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-beta/ext-all-debug.js"></script>
</head>
<body>
<h1>Expected: see item-3 & item-4</h1>
<div id="qaz"></div>
<script>
Ext.onReady(function() {
var cnt = 0;
var crItem = crItem_input;
//crItem = crItem_comp; //!!! uncomment this line for expected layout
function crItem_comp(config) {
var cfg = Ext.apply({
html: 'item-' + cnt++,
style: 'border: red solid 1px'
}, config);
return Ext.create('Ext.Component', cfg);
}
function crItem_input(config) {
var cfg = Ext.apply({
value: 'item-' + cnt++
}, config);
return Ext.create('Ext.form.field.Text', cfg);
}
function crPanel() {
cnt = 0;
return Ext.create('Ext.Panel', {
layout: {type: 'table', columns: 2},
items: [
crItem({width: 200}),
crItem({width: 400}),
crItem({}),
crItem({width: "100%"}),
crItem({colspan: 2, width: "100%"})
]
});
}
// render panel
var p = crPanel();
p.render('qaz');
// render panel in window
var w = Ext.create('Ext.Window', {
title: 'Bug: see item-3 & item-4',
items: [
crPanel()
]
});
w.show();
});
</script>
</body>
</html>