[CLOSED] ComboBox inside DropDownField causes it to collapse on item selection

**Leonid_Veriga** · Jan 13, 2012, 10:34 AM

Hi guys,
I have a problem with a combobox inside a DropDownField - dropdown field collapses when I select any combobox item. I'd like my dropdown to stay open...
In the following example I use a combo inside a CompositeControl inside DropDownField configured as GridPanel cell editor:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
   
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.GridPanel1.Store.Primary.DataSource = this.GetData();
            this.GridPanel1.Store.Primary.DataBind();
        }
    }

    private object[] GetData()
    {
        return new object[]
        {
            new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
            new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
            new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
            new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
            new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
        };
    }

</script>

<!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">

</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />

    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Editable GridPanel" 
        StripeRows="true"
        TrackMouseOver="true"
        Width="700" 
        Height="350"
        AutoExpandColumn="Name">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Name" Header="Name" DataIndex="name">
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Price" DataIndex="price">
                    <Renderer Format="UsMoney" />
                    <Editor>
                        <ext:TextField ID="TextField2" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Composite" Width="150" MenuDisabled="true">
                    <Editor>
                        <ext:DropDownField ID="DropDownField1" runat="server" Width="150" Height="100" ValidateOnBlur="false" Mode="ValueText" Text="" MinWidth="150">
                            <Component>
                                <ext:Panel ID="Panel1" runat="server">
                                    <Items>
                                        <ext:CompositeField ID="CompositeField2" runat="server" Width="150">
                                            <Items>
                                                <ext:Radio ID="Radio5" runat="server" BoxLabel="Option 1" />
                                                <ext:ComboBox ID="ComboBox1" runat="server" Width="60" Mode="Local">
                                                    <Items>
                                                        <ext:ListItem Text="Last" Value="2" />
                                                        <ext:ListItem Text="Current" Value="4" />
                                                    </Items>
                                                </ext:ComboBox>
                                            </Items>
                                        </ext:CompositeField>
                                    </Items>
                                </ext:Panel>
                            </Component>
                        </ext:DropDownField>             
                    </Editor>
                    <EditorOptions AllowBlur="false" AutoSize="Fit"/> 
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >
                <Listeners>
                    <RowSelect Handler="this.grid.stopEditing();" />
                </Listeners>
            </ext:RowSelectionModel>
        </SelectionModel>
    </ext:GridPanel>          
</body>
</html>

**Daniil** · Jan 13, 2012, 12:15 PM

Hi,

Yes, this is a problem of floating elements. It would be too hard to avoid it from closing.

For such requirement on editing we suggest the following solution:
http://forums.ext.net/showthread.php...ll=1#post49885

Sure, it's not exactly what you need, but I demonstrate the idea. Hope the example is clear.

**Leonid_Veriga** · Jan 13, 2012, 12:59 PM

Yes, that is not what I need... I tried to avoid editing window, because all other grid fields have in-cell editors.
But it is working solution,
Thanks a lot!

**Daniil** · Jan 13, 2012, 1:31 PM

Please try to apply the following solution.

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>

    <script type="text/javascript">
        var onRender = function (combo) {
            Ext.fly(combo.list).on("mousedown", function (e) {
                this.ownerCt.on(
                    "beforehide",
                    function () {
                        return false;
                    },
                    null,
                    {
                        single: true
                    }
                );
            },
            combo);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:DropDownField runat="server">
            <Component>
                <ext:Panel runat="server" Width="200">
                    <Items>
                        <ext:ComboBox runat="server" LazyInit="false">
                            <Items>
                                <ext:ListItem Text="Item 1" Value="1" />
                                <ext:ListItem Text="Item 2" Value="2" />
                            </Items>
                            <Listeners>
                                <Render Fn="onRender" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
            </Component>
        </ext:DropDownField>
    </form>
</body>
</html>

**Daniil** · Mar 13, 2014, 12:43 PM

Here is an example for Ext.NET v2.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var myCollapseIf = function (e) {
            var me = this;
                
            if (this.allowblur !== true 
                && !me.isdestroyed 
                && !e.within(me.bodyel, false, true) 
                && !e.within(me.picker.el, false, true)
                && !e.within(me.picker.down("combobox").picker.el, false, true)) { // added this condition

                me.collapse();
            }
        };

        var myMimicBlur = function(e) {
            var me = this,
                picker = me.picker;
            
            if (!picker || !e.within(picker.el, false, true) 
                && !me.isEventWithinPickerLoadMask(e)
                && !e.within(me.picker.down("combobox").picker.el, false, true)) { // added this condition

                Ext.net.DropDownField.superclass.mimicBlur.apply(me, arguments);
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:DropDownField runat="server">
            <CustomConfig>
                <ext:ConfigItem Name="collapseIf" Value="myCollapseIf" Mode="Raw" />
                <ext:ConfigItem Name="mimicBlur" Value="myMimicBlur" Mode="Raw" />
            </CustomConfig>
            <Component>
                <ext:Panel runat="server" Width="200">
                    <Items>
                        <ext:ComboBox runat="server">
                            <Items>
                                <ext:ListItem Text="Item 1" />
                                <ext:ListItem Text="Item 2" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
            </Component>
        </ext:DropDownField>
    </form>
</body>
</html>

Thread: [CLOSED] ComboBox inside DropDownField causes it to collapse on item selection

Thread Tools

Search Thread

Display

[CLOSED] ComboBox inside DropDownField causes it to collapse on item selection

Similar Threads

[CLOSED] AutoLoad GridPanel strore inside a DropDownField

[CLOSED] Enabling button on item selection - combobox

Auto Selection of Value on Tab press in DropDownField

[CLOSED] DropdownField with Datefiled and Timefield inside

ComboBox - Item Selection Width

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] ComboBox inside DropDownField causes it to collapse on item selection

[CLOSED] ComboBox inside DropDownField causes it to collapse on item selection

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us