[CLOSED] Difficulty in Using FieldSet and GridPanel with Paging

  1. #1

    [CLOSED] Difficulty in Using FieldSet and GridPanel with Paging

    Hi all,

    I have a Fieldset and Gridpanel with paging the problem is when the fieldset is expanded the grid with paging fits well with viewport
    But when i collasp the fieldset, i get the gap between the bottombar and the Gridpanel's paging FieldSetCollepsed.jpg(attached).

    I want my page look like in the FieldSetExpanded.jpg(attached) even when i collasp a field set

    Below is my code for page
    <nxtwc:NxtViewport ID="vpInvAdjustments" runat="server" AnchorVertical="100%" AnchorHorizontal="100%"
            Layout="BorderLayout" Region="Center">
            <Items>
                <ext:FitLayout ID="flInvAdjustments" runat="server">
                    <Items>
                        <ext:FormPanel ID="fpInvAdjustments" runat="server" Padding="10" BodyStyle="background-color: #DFE8F6"
                            AnchorHorizontal="100%" AnchorVertical="100%" AutoDataBind="true" Border="false" LabelWidth="110">
                            <Items>
                                <nxtwc:NxtCodeTypeCombobox ID="cmbNxtStkLocation" runat="server" StoreBaseParams="InventoryLocationType"
                                    FieldLabel="StockingLocation" AnchorHorizontal="35%"></nxtwc:NxtCodeTypeCombobox>
                                <nxtwc:NxtTextArea ID="nxtInvAdjNote" runat="server" AnchorVertical="10%" FieldLabel="Note"
                                    AnchorHorizontal="35%">
                                </nxtwc:NxtTextArea>
                                <nxtwc:NxtFieldSet ID="fsInvAdjTransCustFields" runat="server" Title="TransactionCustFields"
                                    AnchorHorizontal="100%" AnchorVertical="20%" Collapsible="true">
                                    <Content>
                                        <nxtwuc:CustomFieldsCtrl ID="nxtcustInvAdjTransFields" runat="server" />
                                    </Content>
                                </nxtwc:NxtFieldSet>
                                <nxtwc:NxtPanel ID="fpnlInvAdjustmentGridCnt" runat="server" Border="false" BodyStyle="background-color: #DFE8F6;"
                                    MonitorResize="true" Region="Center" AnchorHorizontal="100%" AnchorVertical="67%" Layout="FitLayout">
                                    <Content>
                                        <nxtwuc:InventoryAdjustmentGrid ID="gvInvAdjustment" runat="server">
                                        </nxtwuc:InventoryAdjustmentGrid>
                                    </Content>
                                </nxtwc:NxtPanel>
                            </Items>
                            <BottomBar>
                                <ext:Toolbar runat="server" ID="tbSaveCancelIssReq" Visible="true">
                                    <Content>
                                        <nxtwuc:SaveCancelToolBar runat="server" ID="SaveCancelIssueReq" SaveEventName="SaveNewIssueRequisition"
                                            CancelEventName="CancelNewIssueRequisition" />
                                    </Content>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:FormPanel>
                    </Items>
                </ext:FitLayout>
            </Items>
            <Listeners>
                <BeforeRender Handler="Ext.onReady(function () {
                            Ext.GLOBAL_STORE = parent.Ext.GLOBAL_STORE;
                            Ext.EventBroker = parent.Ext.EventBroker;});" />
            </Listeners>
        </nxtwc:NxtViewport>
    for User control of InventoryAdjustmentGrid
    <nxtwc:NxtFitLayout ID="flInvAdjustmentGridCnt" runat="server">
        <Items>
            <nxtwc:NxtFormPanel ID="fpnlInvAdjustmentGridCnt" runat="server" AnchorVertical="100%"
                Border="false">
                <Items>
                    <nxtwc:NxtGridPanel ID="gpInvAdjustmentGridCnt" runat="server" StripeRows="true"
                        AutoScroll="true" AnchorHorizontal="100%" AnchorVertical="100%" TrackMouseOver="true"
                        AutoDataBind="true" StoreID="stInvAdjustment" AutoExpandColumn="ItemDescription">
                        <ColumnModel ID="cmInvAdjustmentGridCnt" runat="server">
                            <Columns>
                                <ext:Column Header="ID" DataIndex="ID" Hidden="true" />
                                <ext:Column ColumnID="colItemNo" Header="ItemNo" DataIndex="ItemNo" Width="20">
                                </ext:Column>
                                <ext:Column ColumnID="colDescription" Header="ItemDescription" DataIndex="ItemDescription">
                                </ext:Column>
                                <ext:Column ColumnID="colBinSequence" Header="ItemBinSequence" DataIndex="ItemBinSequence" Width="20" Align="Right">
                                </ext:Column>
                                <ext:Column ColumnID="colBinID" Header="BinID" DataIndex="BinID" Width="20">
                                </ext:Column>
                                <ext:Column ColumnID="colBinLocation" Header="BinLocation" DataIndex="BinLocation" Width="70">
                                </ext:Column>
                                <ext:Column ColumnID="colQOH" Header="QOH" DataIndex="QOH" Width="10" Align="Right">
                                </ext:Column>
                                <ext:Column ColumnID="colCountQty" Header="CountQty" DataIndex="CountCap" Width="20">
                                    <Editor>
                                        <ext:NumberField ID="txtEditCountCap" runat="server">
                                        </ext:NumberField>
                                    </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="colCapacity" Header="Capacity" DataIndex="Capacity" Width="20" Align="Right">
                                </ext:Column>
                                <ext:Column ColumnID="colUOM" Header="UOM" DataIndex="UOM" Width="20">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="ptbInvAdjustmentPager" runat="server">
                                <Items>
                                    <nxtwc:NxtLabel ID="lblAllBinAdjustmentPageSize" runat="server" FieldLabel="Pagesize"
                                        LabelWidth="22" />
                                    <nxtwc:NxtToolbarSpacer ID="tbsAdjustmentPaging" runat="server" Width="10" />
                                    <nxtwc:NxtComboBox ID="cmbsAdjustmentPaging" runat="server" Width="80" TypeAhead="true">
                                        <Items>
                                            <nxtwc:NxtListItem Text="10" />
                                            <nxtwc:NxtListItem Text="20" />
                                            <nxtwc:nxtListItem Text="30" />
                                            <nxtwc:nxtListItem Text="40" />
                                            <nxtwc:nxtListItem Text="50" />
                                        </Items>
                                        <SelectedItem Value="20" />
                                    </nxtwc:NxtComboBox>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                        <Plugins>
                            <ext:EditableGrid ID="EditableGrid1" runat="server" />
                        </Plugins>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="InvtVHRowSelectionModel" runat="server" SingleSelect="true" />
                        </SelectionModel>
                        <View>
                            <ext:GridView ForceFit="true" MarkDirty="false" />
                        </View>
                    </nxtwc:NxtGridPanel>
                </Items>
            </nxtwc:NxtFormPanel>
        </Items>
    </nxtwc:NxtFitLayout>
    Please help thank you...
    Attached Thumbnails Click image for larger version. 

Name:	FieldSetCollepsed.jpg 
Views:	69 
Size:	89.2 KB 
ID:	3553   Click image for larger version. 

Name:	FieldSetExpanded.jpg 
Views:	55 
Size:	90.3 KB 
ID:	3554  
    Last edited by Daniil; Dec 09, 2011 at 6:49 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please add the following listeners for the FieldSet.
    <ext:FieldSet runat="server">
        <Listeners>
            <Expand Handler="ViewPortClientId.doLayout();" Delay="100" />
            <Collapse Handler="ViewPortClientId.doLayout();" Delay="100" />
        </Listeners>
    </ext:FieldSet>
    One more issue.

    When a container's top level control is a layout control, it overrides a layout setting up by the Layout property.

    I mean that Layout="BorderLayout" doesn't make any sense. Please clarify why do you set up different layouts?

    You may remote the <ext:FitLayout> control and set up Layout="FitLayout" for the Viewport.

    One more issue.

    AnchorHorizontal and AcnhorVertical doesn't make any sense for Viewport. A Viewport must be a single and top level container on a page.
  3. #3
    Hi Daniil,

    I have done the way u have suggested to do.. but no luck, it behavs the same way...

    Below is the code as u suggested.
    <nxtwc:NxtViewport ID="vpInvAdjustments" runat="server" Layout="FitLayout" Region="Center">
            <Items>
                <ext:FormPanel ID="fpInvAdjustments" runat="server" Padding="10" BodyStyle="background-color: #DFE8F6"
                    AnchorHorizontal="100%" AnchorVertical="100%" AutoDataBind="true" Border="false"
                    LabelWidth="110">
                    <Items>
                        <nxtwc:NxtCodeTypeCombobox ID="cmbNxtStkLocation" runat="server" StoreBaseParams="InventoryLocationType"
                            FieldLabel="StockingLocation" AnchorHorizontal="35%"></nxtwc:NxtCodeTypeCombobox>
                        <nxtwc:NxtTextArea ID="nxtInvAdjNote" runat="server" AnchorVertical="10%" FieldLabel="Note"
                            AnchorHorizontal="35%">
                        </nxtwc:NxtTextArea>
                        <nxtwc:NxtFieldSet ID="fsInvAdjTransCustFields" runat="server" Title="TransactionCustFields"
                            AnchorHorizontal="100%" AnchorVertical="20%" Collapsible="true">
                            <Content>
                                <nxtwuc:CustomFieldsCtrl ID="nxtcustInvAdjTransFields" runat="server" />
                            </Content>
                            <Listeners>
                                <Expand Handler="vpInvAdjustments.doLayout();" Delay="100" />
                                <Collapse Handler="vpInvAdjustments.doLayout();" Delay="100" />
                            </Listeners>
                        </nxtwc:NxtFieldSet>
                        <nxtwc:NxtPanel ID="fpnlInvAdjustmentGridCnt" runat="server" Border="false" BodyStyle="background-color: #DFE8F6;"
                            MonitorResize="true" Region="Center" AnchorHorizontal="100%" AnchorVertical="67%">
                            <Content>
                                <nxtwuc:InventoryAdjustmentGrid ID="gvInvAdjustment" runat="server" ResourceNamespace="InvBinCapacityGrid">
                                </nxtwuc:InventoryAdjustmentGrid>
                            </Content>
                        </nxtwc:NxtPanel>
                    </Items>
                    <BottomBar>
                        <ext:Toolbar runat="server" ID="tbSaveCancelIssReq" Visible="true">
                            <Content>
                                <nxtwuc:SaveCancelToolBar runat="server" ID="SaveCancelIssueReq" />
                            </Content>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:FormPanel>
            </Items>
        </nxtwc:NxtViewport>
    Am i missing some thing...

    please help
  4. #4
    Yes, I was wrong. It should not work.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                    new object[] { "test4" },
                    new object[] { "test5" },
                    new object[] { "test6" },
                    new object[] { "test7" },
                    new object[] { "test8" },
                    new object[] { "test9" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server">
                        <Items>
                            <ext:ComboBox 
                                runat="server" 
                                FieldLabel="ComboBox"
                                AnchorHorizontal="35%" />
                            <ext:TextArea 
                                runat="server" 
                                AnchorVertical="10%" 
                                AnchorHorizontal="35%" 
                                FieldLabel="Note" />
                            <ext:FieldSet 
                                runat="server" 
                                Title="FieldSet " 
                                AnchorHorizontal="100%" 
                                AnchorVertical="20%"
                                Collapsible="true">
                                <Items>
                                    <ext:TextField runat="server" />
                                </Items>
                                <Listeners>
                                    <Expand Handler="FormPanel1.doLayout();" Delay="100" />
                                    <Collapse Handler="FormPanel1.doLayout();" Delay="100" />
                                </Listeners>
                            </ext:FieldSet>
                            <ext:Panel 
                                runat="server" 
                                AnchorHorizontal="100%" 
                                AnchorVertical="65%" 
                                Layout="FitLayout">
                                <Items>
                                    <ext:GridPanel runat="server">
                                        <Store>
                                            <ext:Store ID="Store1" runat="server">
                                                <Reader>
                                                    <ext:ArrayReader>
                                                        <Fields>
                                                            <ext:RecordField Name="test" />
                                                        </Fields>
                                                    </ext:ArrayReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test" DataIndex="test" />
                                            </Columns>
                                        </ColumnModel>
                                        <BottomBar>
                                            <ext:PagingToolbar runat="server" PageSize="3" />
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Button" />
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    I think you should use another layout to achieve your requirement. I can suggest VboxLayout.
  5. #5
    Here is an example with VBoxLayout.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                    new object[] { "test4" },
                    new object[] { "test5" },
                    new object[] { "test6" },
                    new object[] { "test7" },
                    new object[] { "test8" },
                    new object[] { "test9" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel runat="server" Layout="VBoxLayout">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container runat="server" Height="25" Layout="FormLayout">
                                <Items>
                                    <ext:ComboBox
                                        runat="server"
                                        FieldLabel="ComboBox"
                                        AnchorHorizontal="35%" />    
                                </Items>
                            </ext:Container>
    
                            <ext:Container runat="server" Flex="15" Layout="FormLayout">
                                <Items>
                                    <ext:TextArea
                                        runat="server"
                                        AnchorHorizontal="35%"
                                        FieldLabel="Note" />
                                </Items>
                            </ext:Container>
                            
                            <ext:FieldSet
                                runat="server"
                                Title="FieldSet "
                                Flex="20"
                                Collapsible="true">
                                <Items>
                                    <ext:TextField runat="server" />
                                </Items>
                            </ext:FieldSet>
                            <ext:Panel
                                runat="server"
                                Flex="65"
                                Layout="FitLayout">
                                <Items>
                                    <ext:GridPanel runat="server">
                                        <Store>
                                            <ext:Store ID="Store1" runat="server">
                                                <Reader>
                                                    <ext:ArrayReader>
                                                        <Fields>
                                                            <ext:RecordField Name="test" />
                                                        </Fields>
                                                    </ext:ArrayReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column Header="Test" DataIndex="test" />
                                            </Columns>
                                        </ColumnModel>
                                        <BottomBar>
                                            <ext:PagingToolbar runat="server" PageSize="3" />
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Button" />
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    hi Daniil,

    Thank you very much, it worked....u can close it

Similar Threads

  1. Gridpanel paging bug
    By kakagu in forum 1.x Help
    Replies: 2
    Last Post: Apr 07, 2012, 1:31 PM
  2. [CLOSED] Paging in Gridpanel
    By mgowder in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 27, 2011, 8:26 AM
  3. [CLOSED] GridPanel Paging
    By cobiscorp in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 21, 2010, 10:29 PM
  4. GridPanel Paging
    By Yannis in forum 1.x Help
    Replies: 3
    Last Post: Jun 30, 2010, 11:27 PM
  5. [CLOSED] GridPanel Paging
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 22, 2009, 5:59 PM

Posting Permissions