What's New?

[CLOSED] How can I add a combobox to panel header?

  1. #1
    Aug 05, 2009, 1:25 PM

    [CLOSED] How can I add a combobox to panel header?

    Is it possible to add a combobox to panel header?

  2. #2
    Aug 05, 2009, 5:10 PM

    RE: [CLOSED] How can I add a combobox to panel header?

    Hi,

    Please see the following sample (I didn't test much therefore can be UI defects) 
    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>

<%@ 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>
    
    <script type="text/javascript">
        var addControl = function (panel, control) {
            control.el.setStyle({display: 'inline', float: 'left'});            
            panel.header.appendChild(control.el);            
        }
    </script>
    
    <style type="text/css">
        .x-title{
            font: bold 11px/15px tahoma, arial, verdana, sans-serif !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:Panel runat="server" Height="200" Width="300" >
            <Listeners>
                <Render Handler="addControl(this, #{TB1});" Delay="100" />
            </Listeners>
            <CustomConfig>
                <ext:ConfigItem Name="header" Value="true" Mode="Raw"></ext:ConfigItem>
            </CustomConfig>
        </ext:Panel>
        
        
        <ext:Panel ID="Panel2" runat="server" Height="200" Width="300" >
            <Listeners>
                <Render Handler="addControl(this, #{TB2});addControl(this, #{TB3});" Delay="100" />
            </Listeners>
            <CustomConfig>
                <ext:ConfigItem Name="header" Value="true" Mode="Raw"></ext:ConfigItem>
            </CustomConfig>
        </ext:Panel>
        
        <div class="x-hidden">
            <ext:Toolbar ID="TB1" runat="server" Flat="true">
                <Items>
                    <ext:ToolbarTextItem runat="server" Text="Title"></ext:ToolbarTextItem>
                    <ext:ToolbarFill />
                    <ext:ComboBox ID="Combo1" runat="server">
                        <Items>
                             <ext:ListItem Text="Item 1" Value="1" />
                             <ext:ListItem Text="Item 2" Value="2" />
                             <ext:ListItem Text="Item 3" Value="3" />
                        </Items>
                        <SelectedItem Value="1" />
                    </ext:ComboBox>
                </Items>
            </ext:Toolbar>
            
            <ext:Toolbar ID="TB2" runat="server" Flat="true">
                <Items>
                    <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Title"></ext:ToolbarTextItem>
                    <ext:ToolbarFill />
                    <ext:ComboBox ID="Combo2" runat="server">
                        <Items>
                             <ext:ListItem Text="Item 1" Value="1" />
                             <ext:ListItem Text="Item 2" Value="2" />
                             <ext:ListItem Text="Item 3" Value="3" />
                        </Items>
                        <SelectedItem Value="1" />
                    </ext:ComboBox>
                </Items>
            </ext:Toolbar>
            
            <ext:Toolbar ID="TB3" runat="server" Flat="true" StyleSpec="margin-top:3px;">
                <Items>
                    <ext:ToolbarButton runat="server" Icon="Accept" Text="Button"></ext:ToolbarButton>
                    <ext:ToolbarFill />
                    <ext:ToolbarButton runat="server" Icon="ArrowUp" Text="Collapse">
                        <Listeners>
                            <Click Handler="#{Panel2}.collapse();" />
                        </Listeners>
                    </ext:ToolbarButton>
                </Items>
            </ext:Toolbar>
        

        
    </form>
</body>
</html>
  3. #3
    Jul 21, 2010, 2:34 PM
    No longer works in chrome. Toolbar is added underneath the header.

    
<%@ 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 id="Head1" runat="server">

    <script type="text/javascript">
        var addControl = function(panel, control) {
            control.el.setStyle({ display: 'inline', float: 'left' });
            panel.header.appendChild(control.el);
        }
    </script>

    <style type="text/css">
        .x-title
        {
            font: bold 11px/15px tahoma, arial, verdana, sans-serif !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel runat="server">
                        <Content>
                            Center
                        </Content>
                    </ext:Panel>
                </Center>
                <South Split="true" Collapsible="true">
                    <ext:Panel ID="SouthPanel" runat="server" Height="150" Padding="6" Html="South">
                        <Listeners>
                            <Render Handler="addControl(this, #{TB1});" Delay="100" />
                        </Listeners>
                        <CustomConfig>
                            <ext:ConfigItem Name="header" Value="true" Mode="Raw">
                            </ext:ConfigItem>
                        </CustomConfig>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    <div class="x-hidden">
        <ext:Toolbar ID="TB1" runat="server" Flat="true">
            <Items>
                <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Title">
                </ext:ToolbarTextItem>
               <ext:ToolbarSpacer Width="5"></ext:ToolbarSpacer>
                <ext:ComboBox ID="Combo1" runat="server">
                    <Items>
                        <ext:ListItem Text="Item 1" Value="1" />
                        <ext:ListItem Text="Item 2" Value="2" />
                        <ext:ListItem Text="Item 3" Value="3" />
                    </Items>
                    <SelectedItem Value="1" />
                </ext:ComboBox>
            </Items>
        </ext:Toolbar>
    </div>
</body>
</html>
  4. #4
    Jul 21, 2010, 4:02 PM
    Hello!

    I have the same in Chrome, IE and FF. What version of Chrome do you use? I use 5.0.375.99.
  5. #5
    Jul 21, 2010, 4:07 PM
    I am using 6.0.466.0 dev . Here's a screenshot.
    Attached Thumbnails Click image for larger version.  Name: combobox header.png  Views: 211  Size: 47.8 KB  ID: 1395  
  6. #6
    Jul 21, 2010, 4:45 PM
    Quote Originally Posted by jchau View Post
    I am using 6.0.466.0 dev . Here's a screenshot.
    Unfortunately we're not supporting the Dev builds of Chrome (currently 6.x). The sample does appear to work correctly in the regular 5.x release builds.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Jul 21, 2010, 5:19 PM
    Yup, np. I completely forgot I was using Chrome dev. Thanks for looking into it.

Similar Threads

  1. [CLOSED] How to auto update multi header combobox
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 03, 2011, 4:22 PM
  2. combobox in grid header
    By rnachman in forum 1.x Help
    Replies: 0
    Last Post: Feb 07, 2011, 5:07 PM
  3. [CLOSED] how to hide panel header
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 05, 2011, 8:35 AM
  4. Add buttons into panel header.
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Nov 23, 2010, 5:22 PM
  5. [CLOSED] Tab Panel Header Visible
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 24, 2009, 6:20 PM

Posting Permissions