[CLOSED] UI Allignment Issue

  1. #1

    [CLOSED] UI Allignment Issue

    Hi all,

    I have attached the screen shot(UI_Allignment.jpge) of the actuall page.
    I need to display 'save cancel' bottom bar to display just above the 'Ok' bottom bar.

    Below is my code
    <nxtwc:NxtFitLayout runat="server" ID="flUNPU">
        <Items>
            <nxtwc:NxtFormPanel ID="frmPanelTPCFPU" runat="server" AnchorHorizontal="100%" Padding="10"
                BodyBorder="false" BodyStyle="background-color: #DFE8F6" Border="false" >
                <Items>
                    <nxtwc:NxtGridPanel ID="gpUNPU" runat="server" StoreID="UNPUStore" StripeRows="true"
                        AnchorHorizontal="100%" AutoDataBind="true" AnchorVertical="30%" EnableColumnHide="false"
                        AutoExpandColumn="Event">
                        <ColumnModel ID="cmUNPU" runat="server">
                            <Columns>
                                <ext:CheckColumn ColumnID="UNPUEnable" Header="Enable" Tooltip="Enable" DataIndex="Enable"
                                    Width="20" Editable="true">
                                </ext:CheckColumn>
                                <ext:Column ColumnID="UNPUName" Header="Name" Tooltip="Name" DataIndex="Name" Width="50">
                                </ext:Column>
                                <ext:Column ColumnID="UNPUObject" Header="Object" Tooltip="Object" DataIndex="Object"
                                    Width="30">
                                </ext:Column>
                                <ext:Column ColumnID="UNPUEvent" Header="Event" Tooltip="Event" DataIndex="Event">
                                </ext:Column>
                                <ext:BooleanColumn ColumnID="UNPUPublic" Header="Public" Tooltip="Public" DataIndex="Public"
                                    TrueText="Yes" FalseText="No" Width="30">
                                </ext:BooleanColumn>
                                <ext:DateColumn ColumnID="UNPUCreated" Header="CreatedOn" Tooltip="CreatedOn" DataIndex="CreatedOn"
                                    Width="50">
                                </ext:DateColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="rsmUNPU" runat="server" />
                        </SelectionModel>
                        <View>
                            <ext:GridView ID="gvUNPU" runat="server" MarkDirty="false" ForceFit="true" EmptyText="No Data Available." />
                        </View>
                        <BottomBar>
                            <nxtwc:NxtPagingToolbar ID="ptbUNPU" runat="server" PageSize="10" HideRefresh="true"
                                StoreID="UNPUStore">
                                <Items>
                                    <nxtwc:NxtLabel ID="lblPagesize" runat="server" Text="Pagesize:" />
                                    <nxtwc:NxtToolbarSpacer ID="tbsSpacer" runat="server" Width="10" />
                                    <nxtwc:NxtComboBox ID="cmbPageSize" runat="server" Width="80">
                                <Items>
                                    <nxtwc:NxtListItem Text="10" />
                                    <nxtwc:NxtListItem Text="20" />
                                    <nxtwc:NxtListItem Text="30" />
                                    <nxtwc:NxtListItem Text="40" />
                                    <nxtwc:NxtListItem Text="50" />
                                </Items>
                                <SelectedItem Value="10" />
                                <Listeners>
                                    <Select Handler="#{ptbUNPU}.pageSize = parseInt(this.getValue()); #{ptbUNPU}.doLoad();" />
                                </Listeners>
                                    </nxtwc:NxtComboBox>
                                </Items>
                            </nxtwc:NxtPagingToolbar>
                        </BottomBar>
                    </nxtwc:NxtGridPanel>
                    <nxtwc:NxtPanel ID="pnlUNPU" runat="server" AnchorVertical="10%" AnchorHorizontal="100%"
                        Border="false" BodyStyle="background-color: #DFE8F6">
                        <Items>
                            <nxtwc:NxtToolbar runat="server" ID="tbUNPUCreateNew" Layout="FitLayout">
                                <Content>
                                    <nxtwuc:CreateNewToolBar runat="server" ID="UNPUCreateNew" ResourceNamespace="UNPUCreateNew"
                                        EditEventName="NewNotification" />
                                </Content>
                            </nxtwc:NxtToolbar>
                        </Items>
                    </nxtwc:NxtPanel>
                    <nxtwc:NxtContainer ID="df" runat="server" Layout="RowLayout" AnchorHorizontal="100%" AnchorVertical="60%">
                        <Items>
                            <nxtwc:NxtTabPanel ID="tabpnlUNPU" ActiveTabIndex="0" runat="server" Border="false"
                                AnchorVertical="60%" BodyStyle="background-color: #DFE8F6">
                                <Items>
                                    <nxtwc:NxtPanel ID="pnlUNPUGeneral" runat="server" AnchorVertical="100%" Title="General"
                                        AnchorHorizontal="100%" Border="false" BodyStyle="background-color: #DFE8F6"
                                        Padding="5">
                                        <Content>
                                            <nxtwuc:UserNotifyGeneral ID="UNPUDetails" runat="server" />
                                        </Content>
                                    </nxtwc:NxtPanel>
                                    <nxtwc:NxtPanel ID="pnlUNPUFilter" runat="server" Title="Filter" AnchorVertical="100%"
                                        AnchorHorizontal="100%" Border="false" BodyStyle="background-color: #DFE8F6"
                                        Padding="5">
                                        <Content>
                                            <%--<nxtwuc:SysExtraFieldsAssignments ID="ESEFAssignments" runat="server" />--%>
                                        </Content>
                                    </nxtwc:NxtPanel>
                                    <nxtwc:NxtPanel ID="pnlUNPUMessage" runat="server" Title="Message" AnchorVertical="100%"
                                        AnchorHorizontal="100%" Border="false" BodyStyle="background-color: #DFE8F6"
                                        Padding="5">
                                        <Content>
                                            <%--<nxtwuc:SysExtraFieldsAssignments ID="ESEFAssignments" runat="server" />--%>
                                        </Content>
                                    </nxtwc:NxtPanel>
                                </Items>
                                <BottomBar>
                                    <nxtwc:NxtToolbar runat="server" ID="tbUNPUSaveCancel" Layout="FitLayout">
                                        <Content>
                                            <nxtwuc:SaveCancelToolBar runat="server" ID="UNPUSaveCancel" SaveEventName="SaveUser"
                                                CancelEventName="CancelUser" />
                                        </Content>
                                    </nxtwc:NxtToolbar>
                                </BottomBar>
                            </nxtwc:NxtTabPanel>
                        </Items>
                    </nxtwc:NxtContainer>
                </Items>
                <BottomBar>
                    <nxtwc:NxtToolbar runat="server" ID="tbUNPUok" Layout="FitLayout">
                        <Content>
                            <nxtwuc:CreateNewToolBar runat="server" ID="UNPUok" ResourceNamespace="UNPUOK" EditEventName="OK" />
                        </Content>
                    </nxtwc:NxtToolbar>
                </BottomBar>
                <Listeners>
                </Listeners>
            </nxtwc:NxtFormPanel>
        </Items>
    </nxtwc:NxtFitLayout>
    Please help Thank You
    Attached Thumbnails Click image for larger version. 

Name:	UI_Allignment.jpg 
Views:	80 
Size:	87.1 KB 
ID:	3825  
    Last edited by Daniil; Feb 20, 2012 at 1:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please try to set up Layout="FitLayout" for:
    <nxtwc:NxtContainer ID="df" Layout="FitLayout" ...>
    instead of RowLayout.
  3. #3
    Hi Daniil,

    I have another UI allignment Issue, Please have a look at the screen shot(UI_Issue.jpge) of the page.
    I need to fit 'field area' or a scrollable window including the 'link button' to display just above the 'Ok' bottom bar.

    Below is my code
    <nxtwc:NxtFitLayout runat="server" ID="flVNPU">
        <Items>
            <nxtwc:NxtFormPanel ID="frmPanelVNPU" runat="server" AnchorHorizontal="100%" PaddingSummary="10px 10px 0"
                BodyBorder="false" BodyStyle="background-color: #DFE8F6" Border="false">
                <Items>
                    <nxtwc:NxtGridPanel ID="gpVNPU" runat="server" StoreID="VNPUStore" StripeRows="true"
                        AnchorHorizontal="100%" AutoDataBind="true" AnchorVertical="40%" EnableColumnHide="false"
                        AutoExpandColumn="Subject">
                        <TopBar>
                            <nxtwc:NxtToolbar ID="tbVNPU" runat="server">
                                <Items>
                                    <ext:ToolbarFill />
                                    <nxtwc:NxtPanel ID="pnlVNPUSearch" runat="server" Border="false">
                                        <Content>
                                            <nxtwuc:Search ResourceNamespace="OutboundMessageGrid" runat="server" SerchComboBoxVisible="false"
                                                AdvSerchButtonVisible="false" ID="OBMGSearch" SerchTextBoxVisible="true" />
                                        </Content>
                                    </nxtwc:NxtPanel>
                                </Items>
                            </nxtwc:NxtToolbar>
                        </TopBar>
                        <ColumnModel ID="cmVNPU" runat="server">
                            <Columns>
                                <ext:DateColumn ColumnID="VNPUSent" Header="Sent" Tooltip="Sent" DataIndex="Sent"
                                    Width="50">
                                </ext:DateColumn>
                                <ext:Column ColumnID="VNPUTo" Header="To" Tooltip="To" DataIndex="To" Width="40">
                                </ext:Column>
                                <ext:Column ColumnID="VNPUSubject" Header="Subject" Tooltip="Subject" DataIndex="Subject">
                                </ext:Column>
                                <ext:Column ColumnID="VNPUName" Header="Name" Tooltip="Name" DataIndex="Name" Width="40">
                                </ext:Column>
                                <ext:Column ColumnID="VNPUObject" Header="Object" Tooltip="Object" DataIndex="Object"
                                    Width="30">
                                </ext:Column>
                                <ext:Column ColumnID="VNPUEvent" Header="Event" Tooltip="Event" DataIndex="Event"
                                    Width="30">
                                </ext:Column>
                                <ext:Column ColumnID="VNPUType" Header="Type" Tooltip="Type" DataIndex="Type" Width="20">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="rsmUNPU" runat="server" />
                        </SelectionModel>
                        <View>
                            <ext:GridView ID="gvVNPU" runat="server" MarkDirty="false" ForceFit="true" EmptyText="No Data Available." />
                        </View>
                        <BottomBar>
                            <nxtwc:NxtPagingToolbar ID="ptbVNPU" runat="server" PageSize="10" HideRefresh="true"
                                StoreID="VNPUStore">
                                <Items>
                                    <nxtwc:NxtLabel ID="lblPagesize" runat="server" Text="Pagesize:" />
                                    <nxtwc:NxtToolbarSpacer ID="tbsSpacer" runat="server" Width="10" />
                                    <nxtwc:NxtComboBox ID="cmbPageSize" runat="server" Width="80">
                                <Items>
                                    <nxtwc:NxtListItem Text="10" />
                                    <nxtwc:NxtListItem Text="20" />
                                    <nxtwc:NxtListItem Text="30" />
                                    <nxtwc:NxtListItem Text="40" />
                                    <nxtwc:NxtListItem Text="50" />
                                </Items>
                                <SelectedItem Value="10" />
                                <Listeners>
                                    <Select Handler="#{ptbVNPU}.pageSize = parseInt(this.getValue()); #{ptbVNPU}.doLoad();" />
                                </Listeners>
                                    </nxtwc:NxtComboBox>
                                </Items>
                            </nxtwc:NxtPagingToolbar>
                        </BottomBar>
                    </nxtwc:NxtGridPanel>
                    <nxtwc:NxtPanel ID="pnlUNPU" runat="server" AnchorVertical="60%" AnchorHorizontal="100%"
                        Border="false" BodyStyle="background-color: #DFE8F6" Title="NotificationDetails">
                        <Items>
                            <ext:Container ID="cntMainVNPU" runat="server" Layout="ColumnLayout" Height="90"
                                AnchorHorizontal="100%" BodyStyle="background-color: #DFE8F6;">
                                <Items>
                                    <ext:Container ID="cntVNPUType" runat="server" ColumnWidth=".5" BodyStyle="background-color: #DFE8F6;"
                                        Layout="FormLayout" AnchorVertical="100%" AnchorHorizontal="100%">
                                        <Items>
                                            <nxtwc:NxtDisplayField ID="dfVNPUSent" DataIndex="Sent" runat="server" FieldLabel="Sent"
                                                AnchorHorizontal="70%" />
                                            <nxtwc:NxtDisplayField ID="dfVNPUTo" DataIndex="To" runat="server" FieldLabel="To"
                                                AnchorHorizontal="70%" />
                                            <nxtwc:NxtDisplayField ID="dfVNPUSubject" DataIndex="Subject" runat="server" FieldLabel="Subject"
                                                AnchorHorizontal="70%" />
                                        </Items>
                                    </ext:Container>
                                    <ext:Container ID="cntVNPUOthers" runat="server" ColumnWidth=".5" BodyStyle="background-color: #DFE8F6;"
                                        Layout="FormLayout" AnchorVertical="100%" AnchorHorizontal="100%">
                                        <Items>
                                            <nxtwc:NxtDisplayField ID="dfVNPUName" DataIndex="Name" runat="server" FieldLabel="Name"
                                                AnchorHorizontal="70%" />
                                            <nxtwc:NxtDisplayField ID="dfVNPUObject" DataIndex="Object" runat="server" FieldLabel="Object"
                                                AnchorHorizontal="70%" />
                                            <nxtwc:NxtDisplayField ID="dfVNPUEvent" DataIndex="Event" runat="server" FieldLabel="Event"
                                                AnchorHorizontal="70%" />
                                        </Items>
                                    </ext:Container>
                                </Items>
                            </ext:Container>
                            <ext:Container ID="CntrIRIAHdr6" runat="server" Layout="FitLayout" AnchorHorizontal="100%">
                                <Items>
                                    <nxtwc:NxtTextArea ID="txtareaVNPUBody" runat="server" DataIndex="Body" />
                                </Items>
                            </ext:Container>
                            <nxtwc:NxtLinkButton ID="lbVNPUAttach" DataIndex="Attach" runat="server" FieldLabel="Attach" />
                        </Items>
                    </nxtwc:NxtPanel>
                </Items>
                <BottomBar>
                    <nxtwc:NxtToolbar runat="server" ID="tbVNPUok" Layout="FitLayout">
                        <Content>
                            <nxtwuc:CreateNewToolBar runat="server" ID="UNPUok" ResourceNamespace="UNPUOK" EditEventName="OK" />
                        </Content>
                    </nxtwc:NxtToolbar>
                </BottomBar>
            </nxtwc:NxtFormPanel>
        </Items>
    </nxtwc:NxtFitLayout>
    Please help Thank You
    Attached Thumbnails Click image for larger version. 

Name:	UI_Issue.jpg 
Views:	54 
Size:	92.0 KB 
ID:	3846  
  4. #4
    Please clarify has the initial problem been solved?
  5. #5
    Hi Daniil

    Yes, the initial problem was solved, but the page got changed, as which is in the attachment...
    So i got this problem.....
  6. #6
    I can suggest the following layout for the "pnlUNPU" Panel.

    Please remove Width and Height of the top level Panel then you will apply this code in your real page.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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:Panel runat="server" Width="500" Height="500" Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Container runat="server" Layout="ColumnLayout" Height="90">
                        <Items>
                            <ext:Container runat="server" ColumnWidth="0.5" Html="Column 1" />
                            <ext:Container runat="server" ColumnWidth="0.5" Html="Column 2" />
                        </Items>
                    </ext:Container>
                    <ext:TextArea runat="server" Flex="1" />
                    <ext:Container runat="server" Height="22" Layout="FormLayout">
                        <Items>
                            <ext:LinkButton runat="server" Text="LinkButton" FieldLabel="FieldLabel" />    
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  7. #7
    Thank You Danill, I worked...

    Thanks a Lot :)

Similar Threads

  1. [CLOSED] Pecilluar issue in the DropDown, UI Issue
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 22, 2012, 12:02 PM

Posting Permissions