What's New?

[CLOSED] Panel + Toolbar + Element Resize

  1. #1
    Apr 30, 2009, 3:47 PM

    [CLOSED] Panel + Toolbar + Element Resize

    Hi guys.

    Trying to add a Textbox on a Toolbar in a GridPanel. I need the Textbox to "fill" any remaining space in the Toolbar. Anyone have a solution for this? This is the code I have so far.

    <ext:FitLayout runat="server">
    <ext:Panel runat="server" Title="" border="false">
        <Body>
            Some data will go here
        </Body>
        <BottomBar>
            <ext:Toolbar runat="server" AutoWidth="true">
                <Items>
                    <!-- need this to resize to fill "rest" of toolbar -->
                    <ext:TextField ID="tInput" runat="server" IDMode="Static />
                    <ext:ToolbarSpacer Width="3" />
                    <ext:Button ID="bSend" runat="server" Text="Send" Icon="CommentEdit" />
                </Items>
            </ext:Toolbar>
        </BottomBar>
    </ext:Panel>
</ext:FitLayout>
    I have tried setting the StyleSpec="width:100%" for the TextField, but that didn't seem to help.

  2. #2
    May 01, 2009, 5:54 AM

    RE: [CLOSED] Panel + Toolbar + Element Resize

    Hi,

    Try this TextField

    <ext:TextField ID="TextField1" runat="server">
    <Listeners>
        <Render Handler="this.el.parent().setStyle({width:'100%'})" />
    </Listeners>
    <CustomConfig>
        <ext:ConfigItem Name="width" Value="99%" Mode="Value"></ext:ConfigItem>
    </CustomConfig>
</ext:TextField>
  3. #3
    May 04, 2009, 1:15 PM

    RE: [CLOSED] Panel + Toolbar + Element Resize

    This seems to be working fine on initial layout, but once I type something into the textfield and "submit" using a button on the same toolbar, the "textfield" grows to the size of the text and causes any other controls on the toolbar to disappear out of the toolbar -- it basically pushes them out of the toolbar.
  4. #4
    May 04, 2009, 6:26 PM

    RE: [CLOSED] Panel + Toolbar + Element Resize

    Hi,

    I have no such problems. Try the following example with another approach
    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization"%>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
    <title></title>
    
    <style type="text/css">
        .inner-toolbar
        {
            padding:0px !important;
            border:0px !important;
            background-position: left -1px !important;
        }
        
        .message-panel{
            padding:1px 0px 0px 5px;
        }
        
        .ext-ie .message-panel{
            padding:2px 0px 0px 5px;            
        }
        
        .ext-ie .message-field{
             margin-top:0px;    
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:ViewPort runat="server">
            <Body>
            <ext:RowLayout runat="server">
                <ext:LayoutRow RowHeight="1">
                    <ext:Panel runat="server">
                        <Body>
                            Some data will go here
                        </Body>
                    </ext:Panel>
                </ext:LayoutRow>
                <ext:LayoutRow>
                    <ext:Panel runat="server" Border="false" BodyStyle="background-color:#d0def0;" MonitorResize="true" Height="25">
                        <Body>
                            <ext:ColumnLayout runat="server">
                                <ext:LayoutColumn ColumnWidth="1">
                                    <ext:Panel runat="server" Border="false" Height="25" Cls="message-panel" BodyStyle="background-color:#d0def0;">
                                        <Body>
                                            <ext:AnchorLayout runat="server">
                                                <ext:Anchor Horizontal="-5">
                                                    <ext:TextField Cls="message-field" runat="server"></ext:TextField>
                                                </ext:Anchor>
                                            </ext:AnchorLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn>
                                    <ext:Panel runat="server" Border="false" BodyStyle="background-color:#d0def0;padding:1px 0px 0px 0px;">
                                        <Body>
                                           <ext:Toolbar runat="server" Cls="inner-toolbar">
                                              <Items>
                                                <ext:ToolbarButton runat="server" Text="Send" Icon="CommentEdit"></ext:ToolbarButton>
                                                <ext:ToolbarSpacer Width="5"></ext:ToolbarSpacer>
                                              </Items>
                                           </ext:Toolbar>
                                        </Body>
                                    </ext:Panel>                                    
                                </ext:LayoutColumn>
                            </ext:ColumnLayout>
                        </Body>
                    </ext:Panel>
                </ext:LayoutRow>
            </ext:RowLayout>
            </Body>
            
            <Listeners>
                <Render Handler="this.doLayout();" Delay="50" />
            </Listeners>
        </ext:ViewPort>          
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Get Column Element from Grid Panel
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 18, 2011, 3:27 PM
  2. Controls in the toolbar inside treeview does not resize?
    By phinoppix in forum 1.x Help
    Replies: 3
    Last Post: May 26, 2011, 4:45 AM
  3. Auto Resize Panel in ViewPort on client-side Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Dec 03, 2008, 3:27 PM
  4. [CLOSED] Auto Resize of North Panel in ViewPort on Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 19, 2008, 12:13 AM
  5. [INVALID] Viewport: Element 'Tab/Panel/TabPanel' is not a known element.
    By t0ny in forum Bugs
    Replies: 8
    Last Post: Jun 11, 2008, 9:58 AM

Posting Permissions