[CLOSED] Layout - Gridpanel / Panel in Window

  1. #1

    [CLOSED] Layout - Gridpanel / Panel in Window

    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>
    Last edited by Daniil; Aug 20, 2014 at 4:31 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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
    Attached Thumbnails windowDlg.png  
  4. #4
    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>
  5. #5
    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.
  6. #6
    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.
  7. #7
    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>
  8. #8
    Comparing with my example, I don't see a Flex="1" setting for the GridPanel in your example.
  9. #9
    Thanks Daniil,

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

Similar Threads

  1. Replies: 2
    Last Post: Nov 09, 2012, 4:32 PM
  2. Replies: 0
    Last Post: Oct 29, 2012, 12:53 PM
  3. Replies: 2
    Last Post: Apr 19, 2012, 8:09 PM
  4. Passing a window panel for a GridPanel.
    By andrefreitasjr in forum 1.x Help
    Replies: 0
    Last Post: Mar 06, 2012, 10:01 AM
  5. Replies: 4
    Last Post: Feb 23, 2010, 7:38 AM

Posting Permissions