PDA

View Full Version : Ext.grid.Panel does not display when rendered to a div



hep
13 Jun 2012, 7:39 PM
[ext 4.0]First,render a grid to a div(display:none),then set the div display,now can't see the grid.
[ext 4.1]First,render a grid to a div(display:none),then set the div display,now can't see the grid's columns. below second is expected.

36220
36221

scottmartin
15 Jun 2012, 6:50 PM
Please provide the test case you used to display this issue.

Scott.

hep
17 Jun 2012, 5:30 PM
Here is the code.click the button,you will see the result.


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
store: {
fields: [
'c1',
'c2'
]
},
width: 434,
height: 256,
stateful: false,
preventHeader: true,
selType: 'rowmodel',
renderTo: 'sheet',
columns:
[
{
text: 'column1',
width: 92,
dataIndex: 'c1'
},
{
text: 'column2',
width: 78,
dataIndex: 'c2'
}
]
});
});


function show() {
document.getElementById("sheet").style.display = "block";
}
</script>
</head>
<body>
<div id="sheet" style="display:none">
sheet:
</div>
<input id="Button1" type="button" onclick="show();" value="show the div" />
</body>
</html>

scottmartin
21 Jun 2012, 1:30 PM
Why not do something like this?



Ext.onReady(function() {
var grid = Ext.create('Ext.grid.Panel', {
store: {
fields: [
'c1',
'c2'
]
},
width: 434,
height: 256,
hidden: true,
stateful: false,
preventHeader: true,
selType: 'rowmodel',
renderTo: Ext.getBody(),
columns: [
{
text: 'column1',
width: 92,
dataIndex: 'c1'},
{
text: 'column2',
width: 78,
dataIndex: 'c2'}
]
});

Ext.create('Ext.Button', {
text: 'Show me the grid!',
renderTo: Ext.getBody(),
handler: function() {
grid.setVisible(true);
}
});
});‚Äč


Scott.