What's New?

[CLOSED] Stretch issues

  1. #1
    Feb 24, 2015, 8:26 AM

    [CLOSED] Stretch issues

    Hi,

    The button bar should be stretched to the bottom. We tried using LayOut="Fitlayout", but not working.
    Guide us!

    <%@ Page Language="C#" AutoEventWireup="true" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server"></ext:ResourceManager>
            <ext:Viewport ID="ViewPort1" runat="server" StyleSpec="background-color: transparent;"
                Layout="FitLayout" Icon="Add">
                <Content>
                    <ext:Container ID="Container1" runat="server" Layout="BorderLayout">
                        <Items>
                            <ext:Panel runat="server" ID="pnlForm" Region="Center" AutoScroll="true" Layout="FitLayout" Border="true">
                                <Content>
                                    <ext:GridPanel ID="gridPanel" runat="server" AutoScroll="true" ForceFit="true" Layout="FitLayout" Border="false">
                                        <Store>
                                            <ext:Store ID="storeGrid" runat="server">
                                                <Model>
                                                    <ext:Model ID="Model1" runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="ContactId" />
                                                            <ext:ModelField Name="FormOfAddress" />
                                                            <ext:ModelField Name="ContactKindId" />
                                                            <ext:ModelField Name="Name" />
                                                            <ext:ModelField Name="AddressLine1" />
                                                            <ext:ModelField Name="AddressLine2" />
                                                            <ext:ModelField Name="Street" />
                                                            <ext:ModelField Name="PostalCode" />
                                                            <ext:ModelField Name="CountryId" />
                                                            <ext:ModelField Name="WebUrl" />
                                                            <ext:ModelField Name="MailAccount" />
                                                            <ext:ModelField Name="Telephone" />
                                                            <ext:ModelField Name="Telefax" />
                                                            <ext:ModelField Name="Comments" />
                                                            <ext:ModelField Name="ActiveStatus" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                                <Proxy>
                                                    <ext:PageProxy></ext:PageProxy>
                                                </Proxy>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:Column ID="colName" runat="server" DataIndex="Name" Align="Left" ColumnID="Name" Width="150">
                                                </ext:Column>
                                                <ext:Column ID="colMailAccount" runat="server" DataIndex="MailAccount" Align="Left" ColumnID="Mail" Width="180">
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>
                                        <SelectionModel>
                                            <ext:RowSelectionModel runat="server" ID="rsmGrid">
                                                <Listeners>
                                                </Listeners>
                                            </ext:RowSelectionModel>
                                        </SelectionModel>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="ptbGrid1" runat="server" StoreID="storeGrid" DisplayInfo="true" />
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="Panel1" runat="server" Region="East" Border="false" Width="450">
                                <Items>
                                    <ext:Panel ID="Panel2" runat="server" Region="Center" Border="false">
                                        <Items>
                                            <ext:FormPanel ID="pnlContactSetUp" runat="server" BodyPadding="5" Border="false">
                                                <FieldDefaults LabelAlign="Left" LabelSeparator="" LabelWidth="115" InputWidth="400" />
                                                <Items>
                                                    <ext:FieldSet ID="pnlControls" runat="server" MarginSpec="0 0 0 10" Border="false">
                                                        <Items>
                                                            <ext:ComboBox runat="server" ID="cboFormOfAddress" DisplayField="Description" ValueField="Description" QueryMode="Local" Name="FormOfAddress" Editable="false" Width="230" Cls="edit-form" DisabledCls="edit-form-disable" LabelCls="indication-1" MsgTarget="Side">
                                                                <Store>
                                                                    <ext:Store ID="storeFormOfAddress" runat="server">
                                                                        <Model>
                                                                            <ext:Model ID="Model2" runat="server" IDProperty="FormOfAddress">
                                                                                <Fields>
                                                                                    <ext:ModelField Name="Description">
                                                                                    </ext:ModelField>
                                                                                </Fields>
                                                                            </ext:Model>
                                                                        </Model>
                                                                    </ext:Store>
                                                                </Store>
                                                                <SelectedItems>
                                                                    <ext:ListItem Value="Mr" />
                                                                </SelectedItems>
                                                            </ext:ComboBox>
                                                            <ext:TextField ID="txtName" Name="Name" runat="server" AllowBlank="false" MaxLength="50" MsgTarget="Side" AutoFitErrors="false" Cls="mandatory" DisabledCls="edit-form-disable" LabelCls="indication-2" Width="400"></ext:TextField>
                                                            <ext:ComboBox runat="server" ID="cboContactKind" DisplayField="Description" ValueField="ContactKindId" QueryMode="Local" Name="ContactKindId" Editable="false" Cls="edit-form" DisabledCls="edit-form-disable" MsgTarget="Side" AutoFitErrors="false" Width="400" EmptyText="Select">
                                                                <Store>
                                                                    <ext:Store ID="storeContactKind" runat="server">
                                                                        <Model>
                                                                            <ext:Model ID="Model3" runat="server" IDProperty="ContactKindId">
                                                                                <Fields>
                                                                                    <ext:ModelField Name="ContactKindId">
                                                                                    </ext:ModelField>
                                                                                    <ext:ModelField Name="Description">
                                                                                    </ext:ModelField>
                                                                                </Fields>
                                                                            </ext:Model>
                                                                        </Model>
                                                                    </ext:Store>
                                                                </Store>
                                                            </ext:ComboBox>
                                                            <ext:TextField ID="txt_Address" Name="AddressLine1" runat="server" MaxLength="200" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" FieldCls="indication-3" Width="400"></ext:TextField>
                                                            <ext:TextField ID="txt_Address1" Name="AddressLine2" runat="server" MaxLength="200" MsgTarget="Side" AutoFitErrors="false" FieldLabel=" " Cls="edit-form" DisabledCls="edit-form-disable" FieldCls="indication-2" Width="400"></ext:TextField>
                                                            <ext:TextField ID="txt_Street" Name="Street" runat="server" MaxLength="50" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" FieldCls="indication-3" Width="400"></ext:TextField>
                                                            <ext:ComboBox runat="server" ID="cboCountry" DisplayField="Description" ValueField="CountryId" QueryMode="Local" Name="CountryId" Editable="false" Cls="edit-form" DisabledCls="edit-form-disable" Width="400" EmptyText="Select" MsgTarget="Side" AutoFitErrors="false">
                                                                <Store>
                                                                    <ext:Store ID="storeCountry" runat="server">
                                                                        <Model>
                                                                            <ext:Model ID="Model4" runat="server" IDProperty="CountryId">
                                                                                <Fields>
                                                                                    <ext:ModelField Name="CountryId">
                                                                                    </ext:ModelField>
                                                                                    <ext:ModelField Name="Description">
                                                                                    </ext:ModelField>
                                                                                </Fields>
                                                                            </ext:Model>
                                                                        </Model>
                                                                    </ext:Store>
                                                                </Store>
                                                            </ext:ComboBox>
                                                            <ext:TextField ID="txtMailAccount" Name="MailAccount" runat="server" MaxLength="80" Vtype="email" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" Width="400">
                                                            </ext:TextField>
                                                            <ext:TextField ID="txtTelephone" Name="Telephone" runat="server" MaxLength="40" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" Width="400"></ext:TextField>
                                                            <ext:TextField ID="txtTeleFax" Name="TeleFax" runat="server" MaxLength="40" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" Width="400"></ext:TextField>
                                                            <ext:TextField ID="txtWebUrl" Name="WebUrl" runat="server" MaxLength="100" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable" Width="400"></ext:TextField>
                                                            <ext:TextArea ID="taComments" Name="Comments" MsgTarget="Side" AutoFitErrors="false" runat="server" Cls="edit-form" DisabledCls="edit-form-disable" Width="400" Height="209"></ext:TextArea>
                                                            <ext:Checkbox ID="chkIsActive" Name="ActiveStatus" runat="server" MsgTarget="Side" AutoFitErrors="false" Cls="edit-form" DisabledCls="edit-form-disable">
                                                            </ext:Checkbox>
 
                                                        </Items>
                                                    </ext:FieldSet>
                                                </Items>
                                            </ext:FormPanel>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel ID="Panel3" runat="server" Region="South" Height="35">
                                        <Items>
                                            <ext:Button ID="btnAdd" runat="server" Text="Add" Width="70" MarginSpec="0 5px 0 0" Icon="Add">
                                                <Listeners>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnEdit" runat="server" Text="Edit" Width="70" MarginSpec="0 5px 0 0" Icon="ApplicationEdit">
                                                <Listeners>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnSave" runat="server" Text="Save" Width="70" MarginSpec="0 5px 0 0" Icon="Disk">
                                                <Listeners>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnCancel" runat="server" Text="Cancel" Width="70" MarginSpec="0 5px 0 0" Icon="Decline">
                                                <Listeners>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnBeforeDelete" runat="server" Text="Delete" Width="70" MarginSpec="0 5px 0 0" Icon="Cross">
                                                <Listeners>
                                                </Listeners>
                                            </ext:Button>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Container>
                </Content>
            </ext:Viewport>
        </div>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: BottomBar.jpg  Views: 4  Size: 63.9 KB  ID: 21792  
    Last edited by Daniil; Feb 26, 2015 at 9:56 AM. Reason: [CLOSED]
  2. #2
    Feb 24, 2015, 9:52 AM
    Hi @speedstepmem4,

    According to your setup I guess that you have missed a Layout="BorderLayout" setting for Panel1.
  3. #3
    Feb 25, 2015, 4:48 PM
    speedstepmem4, in my opinion, your layout is wrong. You're placing buttons into south region.

    I would suggest you to do the following:

    Place buttons within Panel's Buttons, as shown bellow:
    <ext:Panel ID="Panel1" runat="server" Region="East" Border="false" Width="450">
    <Items>
        ...
    </Items>
    <Buttons>
        <ext:Button ID="btnAdd" runat="server" Text="Add" Width="70" MarginSpec="0 5px 0 0" Icon="Add">
            <Listeners>
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnEdit" runat="server" Text="Edit" Width="70" MarginSpec="0 5px 0 0" Icon="ApplicationEdit">
            <Listeners>
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnSave" runat="server" Text="Save" Width="70" MarginSpec="0 5px 0 0" Icon="Disk">
            <Listeners>
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnCancel" runat="server" Text="Cancel" Width="70" MarginSpec="0 5px 0 0" Icon="Decline">
            <Listeners>
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnBeforeDelete" runat="server" Text="Delete" Width="70" MarginSpec="0 5px 0 0" Icon="Cross">
            <Listeners>
            </Listeners>
        </ext:Button>
    </Buttons>
</ext:Panel>
    or place then within Panel's BottomBar, as shown below:

    <ext:Panel ID="Panel1" runat="server" Region="East" Border="false" Width="450">
    <Items>
        ...
    </Items>
    <BottomBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:Button ID="btnAdd" runat="server" Text="Add" Width="70" MarginSpec="0 5px 0 0" Icon="Add">
                    <Listeners>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnEdit" runat="server" Text="Edit" Width="70" MarginSpec="0 5px 0 0" Icon="ApplicationEdit">
                    <Listeners>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnSave" runat="server" Text="Save" Width="70" MarginSpec="0 5px 0 0" Icon="Disk">
                    <Listeners>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnCancel" runat="server" Text="Cancel" Width="70" MarginSpec="0 5px 0 0" Icon="Decline">
                    <Listeners>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnBeforeDelete" runat="server" Text="Delete" Width="70" MarginSpec="0 5px 0 0" Icon="Cross">
                    <Listeners>
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </BottomBar>
</ext:Panel>
    If you use one of the approaches provided above, there is no need to set Panel1's Layout to BordeLayout as suggest by Daniil.

    In addition, it would be interesting to you take a look on Regions Weight example: https://examples3.ext.net/#/Layout/B...gions_Weights/. It would help you to control region's weights, if you really need to place buttons into south region.
    Last edited by RCN; Feb 25, 2015 at 4:52 PM.
  4. #4
    Feb 26, 2015, 8:41 AM

    Stretch issue

    Hi @Daniil,

    That worked. Can close this thread.

    @RCN,

    We will try to implement as per your suggestion!

    Thanks @both.

Similar Threads

  1. [CLOSED] How to stretch the content inside bottom bar
    By odyssey in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 28, 2013, 11:43 AM
  2. [CLOSED] Not stretch User Control in Tab panel
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 28, 2011, 8:23 AM
  3. stretch background image
    By maryam in forum 1.x Help
    Replies: 0
    Last Post: Nov 07, 2010, 4:31 AM
  4. Can I stretch a TextArea control inside a Panel?
    By paul-2011 in forum 1.x Help
    Replies: 7
    Last Post: Aug 26, 2010, 10:55 PM
  5. How to make second Panel in ConainerLayout stretch automatically?
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: Apr 23, 2009, 5:49 PM

Posting Permissions