[CLOSED] Set a GridPanel to Fit a Panels Space

**sisa** · May 25, 2012, 11:45 AM

Hi all

I need to place a GridPanel into a Panel. The Grid should fill the whole Panel...
That's my current code :

    <ext:Panel ID="TabPanel1" runat="server" Icon="ApplicationViewDetail" Title='<%$ I18n: Caption.Trader %>' Split="true" Layout="Fit" TitleCollapse="False" >
        <Items>
            <%--TraderTrust Grid--%>
            <ext:GridPanel runat="server" ID="GridTrader" StripeRows="true" StoreID="storeTrader" TrackMouseOver="true" Margins="0 0 5 5" Layout="Fit"

The Grid doesn't fill the whole Panel !? What's missing here ?

Peter

**Daniil** · May 25, 2012, 12:21 PM

Hi,

Well, according to the posted piece of code, GridPanel should be stretched up to the Panel.

Can you provide a full example to reproduce?

Please note that FitLayout supports only single item. I suspect there are some more items in the Panel, isn't that so?

**sisa** · May 25, 2012, 12:32 PM

Originally Posted by Daniil

Hi,

Well, according to the posted piece of code, GridPanel should be stretched up to the Panel.

Can you provide a full example to reproduce?

Please note that FitLayout supports only single item. I suspect there are some more items in the Panel, isn't that so?

Nope :-)

<ext:Panel ID="TabPanel1" runat="server" Icon="ApplicationViewDetail" Title='<%$ I18n: Caption.Trader %>' Split="true" Layout="Fit" TitleCollapse="False" >
        <Items>
            <%--TraderTrust Grid--%>
            <ext:GridPanel runat="server" ID="GridTrader" StripeRows="true" StoreID="storeTrader" TrackMouseOver="true" Margins="0 0 5 5" Layout="Fit" AutoExpandColumn="TraderName" MaskDisabled="False">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="TraderId" Header="TraderId" Width="75" Hidden="true" DataIndex="TraderId" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <%--IsNew Flag--%>
                        <ext:Column ColumnID="IsNew" DataIndex="IsNew" Header='<%$ I18n: Label.IsNew %>' Width="120" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColNew">
                            <Commands>
                                <ext:ImageCommand Icon="New" CommandName="cmdIsNew">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNew %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdIsNotNew">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNotNew %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareNewState" />
                        </ext:ImageCommandColumn>
                        <%--IsTrusted Flag--%>
                        <ext:Column ColumnID="IsTrusted" DataIndex="IsTrusted" Header='<%$ I18n: Label.IsTrusted %>' Width="120" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColTrusted">
                            <Commands>
                                <ext:ImageCommand Icon="Rosette" CommandName="cmdIsTrusted">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsTrusted %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdIsNotTrusted">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNotTrusted %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareTrustedState" />
                        </ext:ImageCommandColumn>
                        <ext:Column ColumnID="TraderName" Header='<%$ I18n: Label.TraderName %>' Width="120" Hidden="false" DataIndex="TraderName" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <ext:Column ColumnID="DeclarationCount" DataIndex="DeclarationCount" Header='<%$ I18n: Label.DeclarationCount %>' Width="50" Align="Center" />
                        <%--HasInternalNote Flag--%>
                        <ext:Column ColumnID="HasInternalNote" DataIndex="HasInternalNote" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" Header='<%$ I18n: Label.HasInternalNote %>'
                            Width="120" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColHasInternalNote">
                            <Commands>
                                <ext:ImageCommand Icon="PageWhiteText" CommandName="cmdHasInternalNote">
                                    <ToolTip Text='<%$ I18n: Tooltip.HasInternalNote %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdNotHasInternalNote">
                                    <ToolTip Text='<%$ I18n: Tooltip.NotHasInternalNote %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareHasInternalNoteState" />
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                        <DirectEvents>
                            <RowSelect OnEvent="GetTraderDetail">
                                <EventMask ShowMask="true" />
                                <ExtraParams>
                                    <ext:Parameter Name="Values" Value="Ext.encode(#{GridTrader}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                                </ExtraParams>
                            </RowSelect>
                        </DirectEvents>
                    </ext:RowSelectionModel>
                </SelectionModel>
                <DirectEvents>
                    <Command OnEvent="HandleGridCommand">
                        <EventMask ShowMask="true" />
                        <ExtraParams>
                            <ext:Parameter Name="CommandName" Value="command" Mode="Raw" />
                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridTrader}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                        </ExtraParams>
                    </Command>
                </DirectEvents>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbarTrader" runat="server" PageSize="25" StoreID="storeTrader" DisplayInfo="true">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text='<%$ I18n: Label.PageSize %>' />
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                <Items>
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="25" />
                                    <ext:ListItem Text="50" />
                                </Items>
                                <SelectedItem Value="10" />
                                <Listeners>
                                    <Select Handler="#{PagingToolbarTrader}.pageSize = parseInt(this.getValue()); #{PagingToolbarTrader}.doLoad();" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
                <LoadMask ShowMask="true" />
            </ext:GridPanel>
        </Items>
    </ext:Panel>

**Daniil** · May 25, 2012, 12:58 PM

Ok, repeat myself, the GridPanel should be stretched up to the Panel.

So, I guess the Panel is not stretched up to its container.

What are the containers of the Panel up to <body>?

**sisa** · May 25, 2012, 1:07 PM

Here's the whole Page Code

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TraderView.aspx.vb" Inherits="SISA.DeclareIT.Trader" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .CurrencyTextField
        {
            text-align: right;
        }
        .RightAlignedTextField
        {
            text-align: right;
        }
        .CenterAlignedTextField
        {
            text-align: center;
        }
    </style>
    <script type="text/javascript" language="javascript">
        function hideControl(control) {
            if (control.hidden == true) {
                control.show();
            } else {
                control.hide();
            }
        };

        var prepareNewState = function (grid, command, record, row) {
            {
                if (command.command == 'cmdIsNotNew') {
                    command.hidden = record.data.IsNew;
                }
                if (command.command == 'cmdIsNew') {
                    command.hidden = !record.data.IsNew;
                }
            }
        };

        var prepareTrustedState = function (grid, command, record, row) {
            {
                if (command.command == 'cmdIsNotTrusted') {
                    command.hidden = record.data.IsTrusted;
                }
                if (command.command == 'cmdIsTrusted') {
                    command.hidden = !record.data.IsTrusted;
                }
            }
        };

        var prepareHasInternalNoteState = function (grid, command, record, row) {
            {
                if (command.command == 'cmdNotHasInternalNote') {
                    command.hidden = record.data.HasInternalNote;
                }
                if (command.command == 'cmdHasInternalNote') {
                    command.hidden = !record.data.HasInternalNote;
                }
            }
        };
        
    </script>
</head>
<body>
    <form id="frmTrader" runat="server">
    <%--Resource Manager--%>
    <ext:ResourceManager ID="resmanMain" runat="server" />
    <%--Stores--%>
    <ext:Store ID="LanguageStore" runat="server" SerializationMode="Complex">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="LanguageId" />
                    <ext:RecordField Name="Value" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="storeTrader" runat="server" SerializationMode="Complex">
        <Reader>
            <ext:JsonReader IDProperty="TraderId">
                <Fields>
                    <ext:RecordField Name="TraderId" />
                    <ext:RecordField Name="IsNew" Type="Boolean" />
                    <ext:RecordField Name="TraderName" />
                    <ext:RecordField Name="TraderNumber" />
                    <ext:RecordField Name="IsTrusted" Type="Boolean" />
                    <ext:RecordField Name="DeclarationCount" />
                    <ext:RecordField Name="HasInternalNote" Type="Boolean" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Panel ID="TabPanel1" runat="server" Icon="ApplicationViewDetail" Title='<%$ I18n: Caption.Trader %>' Split="true" Layout="Fit" TitleCollapse="False" >
        <Items>
            <%--TraderTrust Grid--%>
            <ext:GridPanel runat="server" ID="GridTrader" StripeRows="true" StoreID="storeTrader" TrackMouseOver="true" Margins="0 0 5 5" Layout="Fit" AutoExpandColumn="TraderName" MaskDisabled="False">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="TraderId" Header="TraderId" Width="75" Hidden="true" DataIndex="TraderId" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <%--IsNew Flag--%>
                        <ext:Column ColumnID="IsNew" DataIndex="IsNew" Header='<%$ I18n: Label.IsNew %>' Width="120" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColNew">
                            <Commands>
                                <ext:ImageCommand Icon="New" CommandName="cmdIsNew">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNew %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdIsNotNew">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNotNew %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareNewState" />
                        </ext:ImageCommandColumn>
                        <%--IsTrusted Flag--%>
                        <ext:Column ColumnID="IsTrusted" DataIndex="IsTrusted" Header='<%$ I18n: Label.IsTrusted %>' Width="120" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColTrusted">
                            <Commands>
                                <ext:ImageCommand Icon="Rosette" CommandName="cmdIsTrusted">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsTrusted %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdIsNotTrusted">
                                    <ToolTip Text='<%$ I18n: Tooltip.IsNotTrusted %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareTrustedState" />
                        </ext:ImageCommandColumn>
                        <ext:Column ColumnID="TraderName" Header='<%$ I18n: Label.TraderName %>' Width="120" Hidden="false" DataIndex="TraderName" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <ext:Column ColumnID="DeclarationCount" DataIndex="DeclarationCount" Header='<%$ I18n: Label.DeclarationCount %>' Width="50" Align="Center" />
                        <%--HasInternalNote Flag--%>
                        <ext:Column ColumnID="HasInternalNote" DataIndex="HasInternalNote" Hidden="true" Resizable="false" Groupable="False" Sortable="False" Align="Center" MenuDisabled="True" Header='<%$ I18n: Label.HasInternalNote %>'
                            Width="120" />
                        <ext:ImageCommandColumn Width="25" ColumnID="commandColHasInternalNote">
                            <Commands>
                                <ext:ImageCommand Icon="PageWhiteText" CommandName="cmdHasInternalNote">
                                    <ToolTip Text='<%$ I18n: Tooltip.HasInternalNote %>' />
                                </ext:ImageCommand>
                                <ext:ImageCommand CommandName="cmdNotHasInternalNote">
                                    <ToolTip Text='<%$ I18n: Tooltip.NotHasInternalNote %>' />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareHasInternalNoteState" />
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                        <DirectEvents>
                            <RowSelect OnEvent="GetTraderDetail">
                                <EventMask ShowMask="true" />
                                <ExtraParams>
                                    <ext:Parameter Name="Values" Value="Ext.encode(#{GridTrader}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                                </ExtraParams>
                            </RowSelect>
                        </DirectEvents>
                    </ext:RowSelectionModel>
                </SelectionModel>
                <DirectEvents>
                    <Command OnEvent="HandleGridCommand">
                        <EventMask ShowMask="true" />
                        <ExtraParams>
                            <ext:Parameter Name="CommandName" Value="command" Mode="Raw" />
                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridTrader}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                        </ExtraParams>
                    </Command>
                </DirectEvents>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbarTrader" runat="server" PageSize="25" StoreID="storeTrader" DisplayInfo="true">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text='<%$ I18n: Label.PageSize %>' />
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                <Items>
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="25" />
                                    <ext:ListItem Text="50" />
                                </Items>
                                <SelectedItem Value="10" />
                                <Listeners>
                                    <Select Handler="#{PagingToolbarTrader}.pageSize = parseInt(this.getValue()); #{PagingToolbarTrader}.doLoad();" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
                <LoadMask ShowMask="true" />
            </ext:GridPanel>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>

**Daniil** · May 25, 2012, 1:08 PM

Well, the Panel is not stretched up to the screen.

You should place that Panel into

<ext:Viewport runat="server" Layout="Fit">

**sisa** · May 25, 2012, 1:31 PM

Originally Posted by Daniil

Well, the Panel is not stretched up to the screen.

You should place that Panel into

<ext:Viewport runat="server" Layout="Fit">

That's the Way it works !
Is this in General the way we can format the Containers ? Placing them in a View Port ?

Peter

**Daniil** · May 25, 2012, 2:31 PM

Viewport is a specialized container representing the viewable application area (the browser viewport).

So, it's a common way to capture the whole screen.

See also
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Viewport

Thread: [CLOSED] Set a GridPanel to Fit a Panels Space

Thread Tools

Search Thread

Display

[CLOSED] Set a GridPanel to Fit a Panels Space

Similar Threads

[CLOSED] Auto GridPanel Height To Fill Available Space

[CLOSED] Blank space at the end of gridpanel

GridPanel shows extra columns(or space) both left and right ?

[CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

[CLOSED] Can I hide the scroll bar space on gridpanel

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Set a GridPanel to Fit a Panels Space

[CLOSED] Set a GridPanel to Fit a Panels Space

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us