[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

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

Hi,

Please try to set up Layout="FitLayout" for:

Code:

---

<nxtwc:NxtContainer ID="df" Layout="FitLayout" ...>

---

instead of RowLayout.

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

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

Please clarify has the initial problem been solved?

Hi Daniil

Yes, the initial problem was solved, but the page got changed, as which is in the attachment...
So i got this problem.....

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

Code:

---

<%@ 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>

---

Thank You Danill, I worked...

Thanks a Lot :)