[CLOSED] DropDownField collapses on CheckBox click.

[Leonid_Veriga]

Hi guys,

I have a DropDownField with a GridPanel inside. GridPanel has CheckColumn.
I have to develop a mechanism like MultiCombo has: user should be able expand DropDownField, select several options, and collapse DropDownField.
The problem I've faced with is that after single click DropDownField collapses automatically. I attempted to discover how I can prevent this - and found out property AllowBlur.. but it didn't help me.
Could you please suggest another way to prevent DropDownField from collapsing?
Thanks in advance!

My example:

<script runat="server">
    
    private object TestData
    {
        get
        {
            return new[]
            {
                new  { ID=1, Name="Item1", IsChecked=false},
                new  { ID=2, Name="Item2", IsChecked=false}
            };
        }
    }
</script>
    
<ext:Panel ID="Panel1" runat="server" Layout="VBoxLayout">
    <Items>
        <ext:DropDownField runat="server" TriggerIcon="SimpleArrowDown" Mode="ValueText">
            <Component>
                <ext:GridPanel runat="server" HideHeaders="true" Layout="FitLayout">
                    <Store>
                        <ext:Store ID="TestStore" runat="server" Data="<%# TestData %>" AutoDataBind="true">
                            <Model>
                                <ext:Model runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="IsChecked" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server" ForceFit="true" Resizable="false">
                        <Items>
                            <ext:CheckColumn runat="server" DataIndex="IsChecked" Width="30" Editable="true">
                                <Listeners>
                                    <CheckChange Handler="#{TestStore}.commitChanges();"/>
                                </Listeners>
                            </ext:CheckColumn>
                            <ext:Column runat="server" DataIndex="Name" Text="Name" Flex="1" Resizable="false" />
                        </Items>
                    </ColumnModel>
                    <Listeners>
                        <SelectionChange Handler="" />
                    </Listeners>
                </ext:GridPanel>
            </Component>
            <Listeners>
                <AfterRender Handler="this.getPicker();" />
            </Listeners>
        </ext:DropDownField>
    </Items>
</ext:Panel>

[Vladimir]

Fixed in SVN. Please update

[Leonid_Veriga]

Thank you, Vladimir!

[Leonid_Veriga]

Vladimir,

It seems I have another issue with collapsing (when user selects value in combo in the header of a grid column).
Will your fix cover this as well?

<script runat="server">
     
    private object TestData
    {
        get
        {
            return new[]
            {
                new  { ID=1, Name="Item1" },
                new  { ID=2, Name="Item2" }
            };
        }
    }
</script>
<ext:Panel runat="server" Layout="VBoxLayout">
    <Items>
        <ext:DropDownField runat="server" TriggerIcon="SimpleArrowDown" Mode="ValueText">
            <Component>
                <ext:GridPanel runat="server" Layout="FitLayout">
                    <Store>
                        <ext:Store ID="TestStore" runat="server" Data="<%# TestData %>" AutoDataBind="true">
                            <Model>
                                <ext:Model runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server" ForceFit="true" Resizable="false">
                        <Items>
                            <ext:Column runat="server" DataIndex="Name" Text="Name" Flex="1" Resizable="false">
                                <HeaderItems>
                                    <ext:ComboBox runat="server" StoreID="TestStore" ValueField="ID" DisplayField="Name" />
                                </HeaderItems>
                            </ext:Column>
                        </Items>
                    </ColumnModel>
                </ext:GridPanel>
            </Component>
        </ext:DropDownField>
    </Items>
</ext:Panel>

[Daniil]

Hi,

No, the fix was for CheckColumn. Now it does stop the "mousedown" event. It prevents collapsing.

There are too many different things can be put into a DropDownField. So, I don't think a fix to cover all cases is possible.

Please stop the "mousedown" event for the ComboBox drop down list. Here is an example for DataField.
http://forums.ext.net/showthread.php...ll=1#post93792

It should work the same way for a ComboBox.

[Vladimir]

ComboBox renders own drop down list to the body therefore click event shows that target outside picker element.
Floating elments (dropdown list of combox) should not be used inside dropdown component.

You can set AllowBlur to true and collapse the list manually (for example, by trigger button)

[Daniil]

We discussed with Vladimir what is better: stopping the mousedown event or AllowBlur="true" and an additional trigger to collapse?

Generally, stopping the mousedown event is a bit tricky, because ExtJS code does force it to be propagated. So, potentially (but not 100%), it can lead to unpredicted consequences. But another approach with AllowBlur should not lead to any issues.

Now is your choice:)