Add ExtJS Dinamic Grid to Ext.Net Viewport in Center Region

[inaltec]

I' have this viewport

<ext:Viewport ID="MainViewport" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="PanelCentral" runat="server" Region="Center" Layout="ColumnLayout">
                <Content>
                    <div id="gridSpace"></div>
                </Content>
            </ext:Panel>
            <ext:Panel ID="PanelMargenSuperior"     runat="server" Region="North"   Cls="RegionNorth"   Border="false" />
            <ext:Panel ID="PanelMargenInferior"     runat="server" Region="South"   Cls="RegionSouth"   Border="false" />
            <ext:Panel ID="PanelMargenIzquierda"    runat="server" Region="East"    Cls="RegionEast"    Border="false" />
            <ext:Panel ID="PanelMargenDerecha"      runat="server" Region="West"    Cls="RegionWest"    Border="false" />
        </Items>
    </ext:Viewport>

And create usin ExtJS a GridPanel dinamically:

// Create the grid and bind it with the data store.
                grid = new Ext.grid.GridPanel({
                    id: 'gridPrincipal',
                    store: gridStore,
                    cm: new Ext.grid.DynamicColumnModel(gridStore),
                    selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                    enableColLock: true,
                    renderTo: 'gridSpace',
                    //height: '600',
                    //region: 'center',
                    layout: 'fit',
                    title: 'Results',
                    border: false,
                    bbar: bar,
                    pageSize: resultPageSize
                });

                // render the grid on UI
                grid.render();

Then is render to DIV tag gridSpace, but the Grid don't use all height space.

How can I use all the Height Space with the grid?
Or how can I create the grid and add it directlly to the MainViewport and create it like center region?

[inaltec]

I got a partial solution, but i'm not sure about the results.

var resizeGrid = function () {
            var width = window.innerWidth - (12 * 2);
            var height = window.innerHeight - (12 * 2);

            Ext.getCmp('gridPrincipal').setWidth(width);
            Ext.getCmp('gridPrincipal').setHeight(height);
        };

An in the resource manager, add a Listener.

    <ext:ResourceManager ID="MainResourceManager" runat="server">
        <Listeners>
            <WindowResize Handler="resizeGrid()" />
        </Listeners>
    </ext:ResourceManager>

I'm still looking for a better solution.

[Daniil]

Hi,

You don't need that <div>, just add a grid directly to the PanelCentral. Then it will participate in the layout logic.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Container-method-add

Example

PanelCentral.add(new Ext.grid.GridPanel(...));

And remove the PanelCentral Content.

[inaltec]

Thanks!!! Works Perfect.

Solution Code:

    <ext:Viewport ID="MainViewport" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="PanelCentral" runat="server" Region="Center" Layout="FitLayout">

            </ext:Panel>
            <ext:Panel ID="PanelMargenSuperior"     runat="server" Region="North"   Cls="RegionNorth"   Border="false" />
            <ext:Panel ID="PanelMargenInferior"     runat="server" Region="South"   Cls="RegionSouth"   Border="false" />
            <ext:Panel ID="PanelMargenIzquierda"    runat="server" Region="East"    Cls="RegionEast"    Border="false" />
            <ext:Panel ID="PanelMargenDerecha"      runat="server" Region="West"    Cls="RegionWest"    Border="false" />
        </Items>
    </ext:Viewport>

// Create the grid and bind it with the data store.
                grid = new Ext.grid.GridPanel({
                    id: 'gridPrincipal',
                    store: gridStore,
                    cm: new Ext.grid.DynamicColumnModel(gridStore),
                    selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                    enableColLock: true,
                    title: 'Results',
                    border: false,
                    bbar: bar,
                    remoteSort: true,
                    pageSize: resultPageSize
                });

                // render the grid on UI
                //grid.render();

                // Add to Panel Central
                PanelCentral.add(grid);
                PanelCentral.doLayout();

And remove all code about resizeGrid() function.

[Daniil]

By the way, you can replace

PanelCentral.add(grid);
PanelCentral.doLayout();

with

PanelCentral.addAndDoLayout(grid);

[inaltec]

Excelent... works perfect too!!!

Thanks again!!!