[CLOSED] Layout - Gridpanel / Panel in Window

**PANAYIOTISP** · Aug 17, 2014, 5:42 AM

Hi,

I am trying to use the panels to do a layout on a new window that will consists of two parts, a header with search controls and a grid with results. I want the controls to stretch through the layout of the window. After fiddling with the panel and gridpanel controls for a number of hours, I managed to create the layout but the gridpanel control did not show a scrollbar even if I set the autoscroll property to true.

I am using ASP.NET. I went over the provided layout examples but couldn't figure out solution. Is there an example of such an arrangement I can use.

<ext:Window
    ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
    BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true" Layout="TableLayout">
    <LayoutConfig>
        <ext:TableLayoutConfig Columns="1" />
    </LayoutConfig>
    
    <Items>

        <ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
            <Content>
                <table>
                    <tr>
                        <td>Keywords<br />
                            <ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
                        </td>
                        <td>Level 1<br />
                            <ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
                                <Listeners>
                                    <Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>

                        <td>Level 2<br />
                            <ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Category<br />
                            <ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
                        </td>
                        <td>Level 3<br />
                            <ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                        <td>Level 4<br />
                            <ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ext:Button runat="server" Text="Search Products" Icon="Application">
                                <DirectEvents>
                                    <Click OnEvent="AddRow_Click" />
                                </DirectEvents>
                            </ext:Button>
                        </td>
                        <td>Level 5<br />
                            <ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                            </ext:ComboBox>
                        </td>
                    </tr>

                </table>
            </Content>
        </ext:Panel>

        <ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align ="StretchMax" />
            </LayoutConfig>
            <Store>
                <ext:Store runat="server" AutoSync="false" ShowWarningOnFailure="true">
                    <Model>
                        <ext:Model runat="server" IDProperty="Id" Name="SelectedProductCatEntryItem" ClientIdProperty="Id" IDMode="Static">
                            <Fields>
                                <ext:ModelField Name="Id" Type="string" />
                                <ext:ModelField Name="Quantity" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="Duration" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="Category" Type="String" />
                                <ext:ModelField Name="Code" Type="String" />
                                <ext:ModelField Name="ProductIdName" Type="String" />
                                <ext:ModelField Name="PrepaymentCharge" Type="Float" />
                                <ext:ModelField Name="OneTimeCharge" Type="Float" />
                                <ext:ModelField Name="RecurringCharge" Type="Float" />
                                <ext:ModelField Name="EndDate" Type="String" />
                                <ext:ModelField Name="EffectiveDate" Type="String" />
                                <ext:ModelField Name="Level1" Type="String" />
                                <ext:ModelField Name="Level2" Type="String" />
                                <ext:ModelField Name="Level3" Type="String" />
                                <ext:ModelField Name="Level4" Type="String" />
                                <ext:ModelField Name="Level5" Type="String" />
                                <ext:ModelField Name="Manufacturer" Type="String" />
                                <ext:ModelField Name="Model" Type="String" />
                                <ext:ModelField Name="DataPackage" Type="String" />
                                <ext:ModelField Name="StoragePackage" Type="String" />
                                <ext:ModelField Name="ColorPackage" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Exception Handler="
                    var error = operation.getError(),
                        message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
                    Ext.net.Notification.show({
                        iconCls    : 'icon-exclamation', 
                        html       : message, 
                        title      : 'EXCEPTION', 
                        autoScroll : true, 
                        hideDelay  : 5000, 
                        width      : 300, 
                        height     : 200
                    });" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
                        <Editor>
                            <ext:NumberField runat="server" MinValue="1" MaxValue="1000" />
                        </Editor>
                    </ext:Column>

                    <ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
                        <Editor>
                            <ext:NumberField runat="server" AllowDecimals="false" MinValue="1" MaxValue="1000" />
                        </Editor>
                    </ext:Column>

                    <ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
                        <Renderer Fn="reqTypeRenderer" />
                        <Editor>
                            <ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
                    <ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
                    <ext:Column runat="server" Text="Name" DataIndex="ProductIdName" MinWidth="250" />

                    <ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
                    <ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
                    <ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
                    <ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
                    <ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
                    <ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
                    <ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
                    <ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
                </Columns>
            </ColumnModel>

            <Plugins>
                <ext:RowEditing runat="server" ClicksToEdit="1" />
            </Plugins>
        </ext:GridPanel>

    </Items>
</ext:Window><ext:Window
    ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
    BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true" Layout="TableLayout">
    <LayoutConfig>
        <ext:TableLayoutConfig Columns="1" />
    </LayoutConfig>
    
    <Items>

        <ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
            <Content>
                <table>
                    <tr>
                        <td>Keywords<br />
                            <ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
                        </td>
                        <td>Level 1<br />
                            <ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
                                <Listeners>
                                    <Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>

                        <td>Level 2<br />
                            <ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Category<br />
                            <ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
                        </td>
                        <td>Level 3<br />
                            <ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                        <td>Level 4<br />
                            <ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ext:Button runat="server" Text="Search Products" Icon="Application">
                                <DirectEvents>
                                    <Click OnEvent="AddRow_Click" />
                                </DirectEvents>
                            </ext:Button>
                        </td>
                        <td>Level 5<br />
                            <ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                <Store>
                                    <ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="String" />
                                                    <ext:ModelField Name="name" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Parameters>
                                            <ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
                                        </Parameters>
                                    </ext:Store>
                                </Store>
                            </ext:ComboBox>
                        </td>
                    </tr>

                </table>
            </Content>
        </ext:Panel>

        <ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align ="StretchMax" />
            </LayoutConfig>
            <Store>
                <ext:Store runat="server" AutoSync="false" ShowWarningOnFailure="true">
                    <Model>
                        <ext:Model runat="server" IDProperty="Id" Name="SelectedProductCatEntryItem" ClientIdProperty="Id" IDMode="Static">
                            <Fields>
                                <ext:ModelField Name="Id" Type="string" />
                                <ext:ModelField Name="Quantity" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="Duration" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
                                <ext:ModelField Name="Category" Type="String" />
                                <ext:ModelField Name="Code" Type="String" />
                                <ext:ModelField Name="ProductIdName" Type="String" />
                                <ext:ModelField Name="PrepaymentCharge" Type="Float" />
                                <ext:ModelField Name="OneTimeCharge" Type="Float" />
                                <ext:ModelField Name="RecurringCharge" Type="Float" />
                                <ext:ModelField Name="EndDate" Type="String" />
                                <ext:ModelField Name="EffectiveDate" Type="String" />
                                <ext:ModelField Name="Level1" Type="String" />
                                <ext:ModelField Name="Level2" Type="String" />
                                <ext:ModelField Name="Level3" Type="String" />
                                <ext:ModelField Name="Level4" Type="String" />
                                <ext:ModelField Name="Level5" Type="String" />
                                <ext:ModelField Name="Manufacturer" Type="String" />
                                <ext:ModelField Name="Model" Type="String" />
                                <ext:ModelField Name="DataPackage" Type="String" />
                                <ext:ModelField Name="StoragePackage" Type="String" />
                                <ext:ModelField Name="ColorPackage" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Exception Handler="
                    var error = operation.getError(),
                        message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
                    Ext.net.Notification.show({
                        iconCls    : 'icon-exclamation', 
                        html       : message, 
                        title      : 'EXCEPTION', 
                        autoScroll : true, 
                        hideDelay  : 5000, 
                        width      : 300, 
                        height     : 200
                    });" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
                        <Editor>
                            <ext:NumberField runat="server" MinValue="1" MaxValue="1000" />
                        </Editor>
                    </ext:Column>

                    <ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
                        <Editor>
                            <ext:NumberField runat="server" AllowDecimals="false" MinValue="1" MaxValue="1000" />
                        </Editor>
                    </ext:Column>

                    <ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
                        <Renderer Fn="reqTypeRenderer" />
                        <Editor>
                            <ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
                    <ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
                    <ext:Column runat="server" Text="Name" DataIndex="ProductIdName" MinWidth="250" />

                    <ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                    <ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
                    <ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
                    <ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
                    <ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
                    <ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
                    <ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
                    <ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
                    <ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
                    <ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
                </Columns>
            </ColumnModel>

            <Plugins>
                <ext:RowEditing runat="server" ClicksToEdit="1" />
            </Plugins>
        </ext:GridPanel>

    </Items>
</ext:Window>

**Daniil** · Aug 18, 2014, 2:04 PM

Hi @PANAYIOTISP,

According to what you've described, I can provide you with such an example.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Window runat="server" Height="400" Width="400">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Panel runat="server" Title="Search conditions" Flex="1" />
                <ext:Panel runat="server" Title="GridPanel" Flex="1" />
            </Items>
        </ext:Window>
    </form>
</body>
</html>

You can use a GridPanel instead of the second Panel.

**PANAYIOTISP** · Aug 18, 2014, 2:40 PM

Thanks for the quick answer.

I have tried many combinations, including the one provided. The issue with the one provided is that the gridpanel does no show the scrollbar (both vertical and horizontal).

Check the attached screenshot of how this looks after applying the suggested change.

Thanks
Panayiotis

**Daniil** · Aug 18, 2014, 2:57 PM

I don't see any data in the GridPanel. Could you, please, clarify why you expect a vertical scrollbar to be appeared? I think it should not.

As for horizontal scrollbar, it appears for me if the combined width of the columns exceeds the GridPanel's width

Example

<%@ Page Language="C#" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
 
        <ext:Window runat="server" Height="400" Width="400">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Panel runat="server" Title="Search conditions" Flex="1" />
                <ext:GridPanel runat="server" Title="GridPanel" Flex="1">
                    <ColumnModel>
                        <Columns>
                            <ext:Column runat="server" Text="Column 1" Width="250" />
                            <ext:Column runat="server" Text="Column 2" Width="250" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

**PANAYIOTISP** · Aug 18, 2014, 3:19 PM

Hi Danil,

as you can see from my code in the original post, the last column should had been the color, but instead it only shows until the first half of the total first month charge.

**Daniil** · Aug 18, 2014, 3:23 PM

Unfortunately, I cannot run your code, it throws Exceptions.

Also I would suggest you to use my example as a boilerplate and build the things up.

**PANAYIOTISP** · Aug 18, 2014, 4:00 PM

Hi Daniil,

I did followup your example as I mentioned, but still the result was the same.
To help out, I put everything in a simple ASP webform for you

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dotCRMPortalV2.WebForm1" %>

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" class="no-js">
<head runat="server">
    <ext:ResourcePlaceHolder runat="server" />
    <title></title>
    <script type="text/javascript">
    var reqTypeRenderer = function (value) {
        try {
            var r = App.reqTypeStore.getById(value);

            if (Ext.isEmpty(r)) {

                return "";
            }
            return r.data.Name;
        } catch (e) {
            debugger;
            return "";
        }
    };
</script>
    <script runat="server">
        public class ProductCatalogEntryItemx {

            public string Id { get; set; }

            public Nullable<int> Quantity { get; set; }
            public Nullable<int> Duration { get; set; }
            public int RequestTypeID { get; set; }

            public string Category { get; set; }
            public string Code { get; set; }
            public string ProductName { get; set; }
            public string DefaultUoMId { get; set; }
            public Nullable<decimal> PrepaymentCharge { get; set; }
            public Nullable<decimal> OneTimeCharge { get; set; }
            public Nullable<decimal> RecurringCharge { get; set; }
            public string EndDate { get; set; }
            public string EffectiveDate { get; set; }
            public string Level1 { get; set; }
            public string Level2 { get; set; }
            public string Level3 { get; set; }
            public string Level4 { get; set; }
            public string Level5 { get; set; }
            public string Manufacturer { get; set; }
            public string Model { get; set; }
            public string DataPackage { get; set; }
            public string StoragePackage { get; set; }
            public string ColorPackage { get; set; }

        } // Class: ProductCatalogEntryItemx


        protected void Page_Load(object sender, EventArgs e) {

        }


        protected void LevelsRefresh(object sender, Ext.Net.StoreReadDataEventArgs e) {
            var levelID = int.Parse(e.Parameters["Level"]);
            //LoadDataForLevel(levelID);

        }

        protected void Search_Click(object sender, Ext.Net.DirectEventArgs e) {
        }

        protected void AddRow_Click(object sender, Ext.Net.DirectEventArgs e) {
        }
    </script>
</head>
<body>
    <form id="frmMain" runat="server">
        <div>
            <ext:ResourceManager runat="server" ID="extNetRMan" FormID="frmMain" />

            <ext:Button runat="server" Text="show window" ID="testbutton" Icon="EmoticonWink" >
                <Listeners>
                    <Click Handler="#{winAddNewProductEntry}.show();"/>
                </Listeners>
            </ext:Button>

            <ext:Window
                ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
                BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
                        <Content>
                            <table>
                                <tr>
                                    <td>Keywords<br />
                                        <ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
                                    </td>
                                    <td>Level 1<br />
                                        <ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
                                            <Listeners>
                                                <Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </td>

                                    <td>Level 2<br />
                                        <ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                            DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                            <Store>
                                                <ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
                                                    <Model>
                                                        <ext:Model runat="server" IDProperty="Id">
                                                            <Fields>
                                                                <ext:ModelField Name="id" Type="String" />
                                                                <ext:ModelField Name="name" Type="String" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                    <Parameters>
                                                        <ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
                                                    </Parameters>
                                                </ext:Store>
                                            </Store>
                                            <Listeners>
                                                <Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Category<br />
                                        <ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
                                    </td>
                                    <td>Level 3<br />
                                        <ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                            DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                            <Store>
                                                <ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                                    <Model>
                                                        <ext:Model runat="server" IDProperty="Id">
                                                            <Fields>
                                                                <ext:ModelField Name="id" Type="String" />
                                                                <ext:ModelField Name="name" Type="String" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                    <Parameters>
                                                        <ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
                                                    </Parameters>
                                                </ext:Store>
                                            </Store>
                                            <Listeners>
                                                <Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </td>
                                    <td>Level 4<br />
                                        <ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                            DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                            <Store>
                                                <ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
                                                    <Model>
                                                        <ext:Model runat="server" IDProperty="Id">
                                                            <Fields>
                                                                <ext:ModelField Name="id" Type="String" />
                                                                <ext:ModelField Name="name" Type="String" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                    <Parameters>
                                                        <ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
                                                    </Parameters>
                                                </ext:Store>
                                            </Store>
                                            <Listeners>
                                                <Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ext:Button runat="server" Text="Search Products" Icon="Application">
                                            <DirectEvents>
                                                <Click OnEvent="Search_Click" />
                                            </DirectEvents>
                                        </ext:Button>
                                    </td>
                                    <td>Level 5<br />
                                        <ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
                                            DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
                                            <Store>
                                                <ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
                                                    <Model>
                                                        <ext:Model runat="server" IDProperty="Id">
                                                            <Fields>
                                                                <ext:ModelField Name="id" Type="String" />
                                                                <ext:ModelField Name="name" Type="String" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                    <Parameters>
                                                        <ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
                                                    </Parameters>
                                                </ext:Store>
                                            </Store>
                                        </ext:ComboBox>
                                    </td>
                                    <td>
                                        <ext:Button runat="server" Text="Accept Product Selection" Icon="Accept">
                                            <DirectEvents>
                                                <Click OnEvent="AddRow_Click" Before="return #{gpCatProductEdit}.store.isDirty();">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="data" Value="#{gpCatProductEdit}.store.getChangedData()" Mode="Raw" Encode="true" />
                                                    </ExtraParams>
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </td>
                                </tr>

                            </table>
                        </Content>
                    </ext:Panel>

                    <ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true">
                        <Store>
                            <ext:Store runat="server" ShowWarningOnFailure="true">
                                <Model>
                                    <ext:Model runat="server" IDProperty="Id" Name="ProductCatalogEntryItem" ClientIdProperty="Id" IDMode="Static">
                                        <Fields>
                                            <ext:ModelField Name="Id" Type="string" />
                                            <ext:ModelField Name="Quantity" Type="Int" />
                                            <ext:ModelField Name="Duration" Type="Int" />
                                            <ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
                                            <ext:ModelField Name="Category" Type="String" />
                                            <ext:ModelField Name="Code" Type="String" />
                                            <ext:ModelField Name="ProductName" Type="String" />
                                            <ext:ModelField Name="PrepaymentCharge" Type="Float" />
                                            <ext:ModelField Name="DefaultUoMId" Type="String" />
                                            <ext:ModelField Name="OneTimeCharge" Type="Float" />
                                            <ext:ModelField Name="RecurringCharge" Type="Float" />
                                            <ext:ModelField Name="EndDate" Type="Date" DateFormat="dd-MMM-yyyy" />
                                            <ext:ModelField Name="EffectiveDate" Type="Date" DateFormat="dd-MMM-yyyy" />
                                            <ext:ModelField Name="Level1" Type="String" />
                                            <ext:ModelField Name="Level2" Type="String" />
                                            <ext:ModelField Name="Level3" Type="String" />
                                            <ext:ModelField Name="Level4" Type="String" />
                                            <ext:ModelField Name="Level5" Type="String" />
                                            <ext:ModelField Name="Manufacturer" Type="String" />
                                            <ext:ModelField Name="Model" Type="String" />
                                            <ext:ModelField Name="DataPackage" Type="String" />
                                            <ext:ModelField Name="StoragePackage" Type="String" />
                                            <ext:ModelField Name="ColorPackage" Type="String" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
                                    <Exception Handler="
                    var error = operation.getError(),
                        message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
                    Ext.net.Notification.show({
                        iconCls    : 'icon-exclamation', 
                        html       : message, 
                        title      : 'EXCEPTION', 
                        autoScroll : true, 
                        hideDelay  : 5000, 
                        width      : 300, 
                        height     : 200
                    });" />
                                </Listeners>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
                                    <Editor>
                                        <ext:NumberField runat="server" AllowBlank="true" AllowDecimals="false" />
                                    </Editor>
                                </ext:Column>

                                <ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
                                    <Editor>
                                        <ext:NumberField runat="server" AllowBlank="true" AllowDecimals="false" />
                                    </Editor>
                                </ext:Column>

                                <ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
                                    <Renderer Fn="reqTypeRenderer" />
                                    <Editor>
                                        <ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
                                <ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
                                <ext:Column runat="server" Text="Name" DataIndex="ProductName" MinWidth="250" />

                                <ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                                <ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                                <ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
                                <ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
                                <ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
                                <ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
                                <ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
                                <ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
                                <ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
                                <ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
                                <ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
                                <ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
                                <ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
                                <ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
                                <ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
                            </Columns>
                        </ColumnModel>

                        <Plugins>
                            <ext:CellEditing runat="server" ClicksToEdit="2" />
                        </Plugins>
                    </ext:GridPanel>

                </Items>
            </ext:Window>

        </div>
    </form>
</body>
</html>

**Daniil** · Aug 19, 2014, 5:31 AM

Comparing with my example, I don't see a Flex="1" setting for the GridPanel in your example.

**PANAYIOTISP** · Aug 20, 2014, 2:39 AM

Thanks Daniil,

that seems to have been the trick. I didn't anticipate flex to make this work

Thread: [CLOSED] Layout - Gridpanel / Panel in Window

Thread Tools

Search Thread

Display

[CLOSED] Layout - Gridpanel / Panel in Window

Similar Threads

[CLOSED] Layout: How to align a panel (absolute height and width) in the center of another panel?

after hiding a Panel, the layout of GridPanel didn't alignd with Head Column

Fit Layout not being applied to GridPanel on collapsed Panel/Tab

Passing a window panel for a GridPanel.

Parent for Layout Control (test) must be a Coolite Container Control, such as Panel, TabPanel, Window, ViewPort, etc.

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Layout - Gridpanel / Panel in Window

[CLOSED] Layout - Gridpanel / Panel in Window

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us