Menu
I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.
From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes:
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
but if I replace the first three lines with the lines below, it doesn't:
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div.
If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div.
Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?
772
To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.
Ext.EventManager.onWindowResize(panel.doLayout, panel);
In your example, store the Panel into var panel, and then set up the event handler after the var declaration but still inside of Ext.onReady.
Here is a full single page solution:
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: 'areaDiv',
layout: 'fit',
items: [{
height: 200,
title: 'foo',
xtype: 'grid',
cm: new Ext.grid.ColumnModel([
{header: "id", width: 400},
{header: "name", width: 400}
]),
store: new Ext.data.ArrayStore({
fields: ['id','name'],
data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
})
}]
});
//pass along browser window resize events to the panel
Ext.EventManager.onWindowResize(panel.doLayout, panel);
});
</script>
</head>
<body>
header
<div id="areaDiv" style="padding:30px;"></div>
footer
</body>
</html>
Note that I've removed the redundant panel (a GridPanel is a Panel, so no need to wrap it), and used layout fit instead of anchor. Layout fit is actually the key to a fluid layout. Make the browser smaller, then bigger. You'll see the grid always fills the entire width, with the exception of the padding.
138
I don't have enough reputation to "comment anywhere" yet, but I do have a fix to the "not working when window is resized smaller" problem described by HOCA. I was having the same problem too, using the solution outlined by this answer. After Googling around for a while, I found this thread on the sencha.com website. Using a similar technique to the one described there seems to work better cross-browser (using the exact solution offered there seems to work somewhat differently between FF/IE).
Ext.EventManager.onWindowResize(function() {
// pass "true" to get the contendWidth (excluding border/padding/etc.)
mainPanel.setWidth(Ext.getBody().getWidth(true));
// seems to be no need to call mainPanel.doLayout() here in my situation
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
