[CLOSED] Multicombobox list doesn't behave when used in a DropDownField component

  1. #1

    [CLOSED] Multicombobox list doesn't behave when used in a DropDownField component

    Hello:

    To reproduce please use this code and follow these steps:

    1. Run the page. Click on the down arrow of the dropdown field
    2. Click on the down arrow of the combobox that contains Item 2, Item 5. The list of items will be displayed.
    3. Try to check Item 1 by clicking anywhere on the Item 1 line. The entire thing disappears.

    I haven't tested this exact sample in 2.1.1 but I had something similar in my app that used to work in 2.1.1 and now it doesn't anymore in version 2.5.2.

    Any ideas on how to fix it?

    Thank you

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>DropDownField Overview - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
            var getTasks = function (tree) {
                var msg = [], 
                    selNodes = tree.getChecked();
                msg.push("[");   
                 
                Ext.each(selNodes, function (node) {
                    if (msg.length > 1) {
                        msg.push(",");
                    }
                    
                    msg.push(node.data.text);
                });
                
                msg.push("]");
                
                return msg.join("");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>DropDownField Overview</h1>
            
    
            <ext:DropDownField 
                ID="Field3" 
                runat="server" 
                Editable="false" 
                Width="300" 
                AllowBlur="true"
                TriggerIcon="SimpleArrowDown">
                <Component>
                    <ext:TreePanel 
                        runat="server" 
                        Title="My Task List"
                        Icon="Accept"
                        Height="300"
                        Shadow="false"
                        UseArrows="true"
                        AutoScroll="true"
                        Animate="true"
                        EnableDD="true"
                        ContainerScroll="true"
                        RootVisible="false">
                        <TopBar>
                          <ext:Toolbar runat="server">
                            <Items>
                               <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                                  <Items>
                                      <ext:ListItem Text="Item 1" Value="1" />
                                      <ext:ListItem Text="Item 2" Value="2" />
                                      <ext:ListItem Text="Item 3" Value="3" />
                                      <ext:ListItem Text="Item 4" Value="4" />
                                      <ext:ListItem Text="Item 5" Value="5" />
                                  </Items>
                
                                  <SelectedItems>
                                      <ext:ListItem Value="2" />
                                      <ext:ListItem Index="4" />
                                  </SelectedItems>
                              </ext:MultiCombo>
                            </Items>
                          </ext:Toolbar>
                        </TopBar>
                        <Root>
                            <ext:Node>
                                <Children>
                                    <ext:Node Text="To Do" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                            <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                            <ext:Node Text="Clean house" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                    
                                    <ext:Node Text="Grocery List" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                            <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                            <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                            
                                            <ext:Node Text="Energy foods" Icon="Folder">
                                                <Children>
                                                    <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                                    <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                                </Children>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                    
                                    <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
                                            <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                            <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Root>
                        
                        <Buttons>
                            <ext:Button runat="server" Text="Close">
                                <Listeners>
                                    <Click Handler="#{Field3}.collapse();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                        
                        <Listeners>
                            <CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
                        </Listeners>
                              
                     </ext:TreePanel>
                </Component>
                <Listeners>
                    <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                </Listeners>
            </ext:DropDownField>
            
       </form>
    </body>
    </html>
    Last edited by Daniil; Oct 08, 2014 at 10:49 AM. Reason: [CLOSED]
  2. #2
    I just wanted to add that a normal combobox has the same problem. Run this and follow the same steps:


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>DropDownField Overview - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
            var getTasks = function (tree) {
                var msg = [], 
                    selNodes = tree.getChecked();
                msg.push("[");   
                 
                Ext.each(selNodes, function (node) {
                    if (msg.length > 1) {
                        msg.push(",");
                    }
                    
                    msg.push(node.data.text);
                });
                
                msg.push("]");
                
                return msg.join("");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>DropDownField Overview</h1>
            
    
            <ext:DropDownField 
                ID="Field3" 
                runat="server" 
                Editable="false" 
                Width="300" 
                AllowBlur="true"
                TriggerIcon="SimpleArrowDown">
                <Component>
                    <ext:TreePanel 
                        runat="server" 
                        Title="My Task List"
                        Icon="Accept"
                        Height="300"
                        Shadow="false"
                        UseArrows="true"
                        AutoScroll="true"
                        Animate="true"
                        EnableDD="true"
                        ContainerScroll="true"
                        RootVisible="false">
                        <TopBar>
                          <ext:Toolbar runat="server">
                            <Items>
    <%--                           <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                                  <Items>
                                      <ext:ListItem Text="Item 1" Value="1" />
                                      <ext:ListItem Text="Item 2" Value="2" />
                                      <ext:ListItem Text="Item 3" Value="3" />
                                      <ext:ListItem Text="Item 4" Value="4" />
                                      <ext:ListItem Text="Item 5" Value="5" />
                                  </Items>
                
                                  <SelectedItems>
                                      <ext:ListItem Value="2" />
                                      <ext:ListItem Index="4" />
                                  </SelectedItems>
                              </ext:MultiCombo>--%>
                              <ext:ComboBox ID="combo" runat="server">
                                <Items>
                                  <ext:ListItem Text="Item 1" Value="1" />
                                  <ext:ListItem Text="Item 2" Value="2" />
                                  <ext:ListItem Text="Item 3" Value="3" />
                                  <ext:ListItem Text="Item 4" Value="4" />
                                  <ext:ListItem Text="Item 5" Value="5" />
                                </Items>
                              </ext:ComboBox>
    
                            </Items>
                          </ext:Toolbar>
                        </TopBar>
                        <Root>
                            <ext:Node>
                                <Children>
                                    <ext:Node Text="To Do" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                            <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                            <ext:Node Text="Clean house" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                    
                                    <ext:Node Text="Grocery List" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                            <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                            <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                            
                                            <ext:Node Text="Energy foods" Icon="Folder">
                                                <Children>
                                                    <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                                    <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                                </Children>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                    
                                    <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
                                            <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                            <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Root>
                        
                        <Buttons>
                            <ext:Button runat="server" Text="Close">
                                <Listeners>
                                    <Click Handler="#{Field3}.collapse();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                        
                        <Listeners>
                            <CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
                        </Listeners>
                              
                     </ext:TreePanel>
                </Component>
                <Listeners>
                    <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                </Listeners>
            </ext:DropDownField>
            
       </form>
    </body>
    </html>
  3. #3
    Hi @bogc,

    I see that the following has appeared in ExtJS since Ext.NET v2.1.1 in the Ext.form.field.Picker class:
    triggerBlur: function() {
        var picker = this.picker;
                
        this.callParent(arguments);
        if (picker && picker.isVisible()) {
            picker.hide();
        }
    }
    I think it has appeared to fix a bug when a picker field blurs, but its picker doesn't hide.

    To return the old behavior you can apply this:
    Ext.form.field.Picker.override({
        triggerBlur: Ext.form.field.Picker.superclass.triggerBlur
    });
  4. #4
    Hi, Daniil:

    Thank you for the tip. This basically reverts to the behavior I've seen in 2.1.1 which has another issue which i think the patch was trying to fix.

    If you try the following sample and do the following:

    1. Expand the dropdown list
    2. Click on the window but outside the dropdown field and its list. The list gets behind the window (it positions itself in the grayed out area) instead of being closed. If I close the window the dropdown list is still visible (I would have to add code to make sure the dropdownfield is collapsed).

    Is there a way to fix this without running into the issue I originally reported?

    Thank you

    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>DropDownField Overview - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
          Ext.form.field.Picker.override({
            triggerBlur: Ext.form.field.Picker.superclass.triggerBlur
          });
    
          var getTasks = function (tree) {
            var msg = [], 
                selNodes = tree.getChecked();
            msg.push("[");   
                 
            Ext.each(selNodes, function (node) {
              if (msg.length > 1) {
                msg.push(",");
              }
                    
              msg.push(node.data.text);
            });
                
            msg.push("]");
                
            return msg.join("");
          };
    
          function myEventHandler(e) {
            if (!e)
              e = window.event;
    
            //IE9 & Other Browsers
            if (e.stopPropagation) {
              e.stopPropagation();
            }
            //IE8 and Lower
            else {
              e.cancelBubble = true;
            }
          }
    
          Ext.onReady(function()
          {
    
          });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>DropDownField Overview x</h1>
            
          
           <ext:Window ID="myWindow" Layout="form" Title="My Window" Modal="True" runat="server" Width="500">
            <Items>
              <ext:DropDownField 
                  ID="Field3" 
                  runat="server" 
                  Editable="false" 
                  Width="450" 
                  AllowBlur="true"
                  TriggerIcon="SimpleArrowDown">
                  <Component>
                      <ext:TreePanel 
                          runat="server" 
                          Title="My Task List"
                          Icon="Accept"
                          Height="300"
                          Shadow="false"
                          UseArrows="true"
                          AutoScroll="true"
                          Animate="true"
                          EnableDD="true"
                          ContainerScroll="true"
                          RootVisible="false">
                          <TopBar>
                            <ext:Toolbar runat="server">
                              <Items>
      <%--                           <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="3" />
                                        <ext:ListItem Text="Item 4" Value="4" />
                                        <ext:ListItem Text="Item 5" Value="5" />
                                    </Items>
                
                                    <SelectedItems>
                                        <ext:ListItem Value="2" />
                                        <ext:ListItem Index="4" />
                                    </SelectedItems>
                                </ext:MultiCombo>--%>
                                <ext:ComboBox ID="combo" runat="server">
                                  <Items>
                                    <ext:ListItem Text="Item 1" Value="1" />
                                    <ext:ListItem Text="Item 2" Value="2" />
                                    <ext:ListItem Text="Item 3" Value="3" />
                                    <ext:ListItem Text="Item 4" Value="4" />
                                    <ext:ListItem Text="Item 5" Value="5" />
                                  </Items>
                                  <Listeners>                              
                                    <Select Handler="alert('blab'); myEventHandler(e);" />
                                  </Listeners>
                                </ext:ComboBox>
    
                              </Items>
                            </ext:Toolbar>
                          </TopBar>
                          <Root>
                              <ext:Node>
                                  <Children>
                                      <ext:Node Text="To Do" Icon="Folder">
                                          <Children>
                                              <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                              <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                              <ext:Node Text="Clean house" Leaf="true" Checked="False" />
                                          </Children>
                                      </ext:Node>
                                    
                                      <ext:Node Text="Grocery List" Icon="Folder">
                                          <Children>
                                              <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                              <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                              <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                            
                                              <ext:Node Text="Energy foods" Icon="Folder">
                                                  <Children>
                                                      <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                                      <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                                  </Children>
                                              </ext:Node>
                                          </Children>
                                      </ext:Node>
                                    
                                      <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                          <Children>
                                              <ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
                                              <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                              <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                          </Children>
                                      </ext:Node>
                                  </Children>
                              </ext:Node>
                          </Root>
                        
                          <Buttons>
                              <ext:Button runat="server" Text="Close">
                                  <Listeners>
                                      <Click Handler="#{Field3}.collapse();" />
                                  </Listeners>
                              </ext:Button>
                          </Buttons>
                        
                          <Listeners>
                              <CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
                          </Listeners>
                              
                       </ext:TreePanel>
                  </Component>
                  <Listeners>
                      <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                  </Listeners>
              </ext:DropDownField>
              </Items>
        </ext:Window>        
       </form>
    </body>
    </html>
  5. #5
    It seems that placing the component in a modal window might alleviate the issue.

    I am still curious to see if there is another way...

    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>DropDownField Overview - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
          Ext.form.field.Picker.override({
            triggerBlur: Ext.form.field.Picker.superclass.triggerBlur
          });
    
          var getTasks = function (tree) {
            var msg = [], 
                selNodes = tree.getChecked();
            msg.push("[");   
                 
            Ext.each(selNodes, function (node) {
              if (msg.length > 1) {
                msg.push(",");
              }
                    
              msg.push(node.data.text);
            });
                
            msg.push("]");
                
            return msg.join("");
          };
    
          function myEventHandler(e) {
            if (!e)
              e = window.event;
    
            //IE9 & Other Browsers
            if (e.stopPropagation) {
              e.stopPropagation();
            }
            //IE8 and Lower
            else {
              e.cancelBubble = true;
            }
          }
    
          Ext.onReady(function()
          {
    
          });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>DropDownField Overview x</h1>
            
          
           <ext:Window ID="myWindow" Layout="form" Title="My Window" Modal="True" runat="server" Width="500">
            <Items>
              <ext:DropDownField 
                  ID="Field3" 
                  runat="server" 
                  Editable="false" 
                  Width="450" 
                  AllowBlur="true"
                  TriggerIcon="SimpleArrowDown">
                  <Component>
                      <ext:Window runat="server" ID="myOtherWindow" Layout="fit" Modal="True">
                        <Items>
                          <ext:TreePanel 
                              runat="server" 
                              Title="My Task List"
                              Icon="Accept"
                              Height="300"
                              Shadow="false"
                              UseArrows="true"
                              AutoScroll="true"
                              Animate="true"
                              EnableDD="true"
                              ContainerScroll="true"                    
                              RootVisible="false">
                              <TopBar>
                                <ext:Toolbar runat="server">
                                  <Items>
          <%--                           <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                                        <Items>
                                            <ext:ListItem Text="Item 1" Value="1" />
                                            <ext:ListItem Text="Item 2" Value="2" />
                                            <ext:ListItem Text="Item 3" Value="3" />
                                            <ext:ListItem Text="Item 4" Value="4" />
                                            <ext:ListItem Text="Item 5" Value="5" />
                                        </Items>
                
                                        <SelectedItems>
                                            <ext:ListItem Value="2" />
                                            <ext:ListItem Index="4" />
                                        </SelectedItems>
                                    </ext:MultiCombo>--%>
                                    <ext:ComboBox ID="combo" runat="server">
                                      <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="3" />
                                        <ext:ListItem Text="Item 4" Value="4" />
                                        <ext:ListItem Text="Item 5" Value="5" />
                                      </Items>
                                      <Listeners>                              
                                        <Select Handler="alert('blab'); myEventHandler(e);" />
                                      </Listeners>
                                    </ext:ComboBox>
    
                                  </Items>
                                </ext:Toolbar>
                              </TopBar>
                              <Root>
                                  <ext:Node>
                                      <Children>
                                          <ext:Node Text="To Do" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Clean house" Leaf="true" Checked="False" />
                                              </Children>
                                          </ext:Node>
                                    
                                          <ext:Node Text="Grocery List" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                            
                                                  <ext:Node Text="Energy foods" Icon="Folder">
                                                      <Children>
                                                          <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                                          <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                                      </Children>
                                                  </ext:Node>
                                              </Children>
                                          </ext:Node>
                                    
                                          <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                              </Children>
                                          </ext:Node>
                                      </Children>
                                  </ext:Node>
                              </Root>
                        
                              <Buttons>
                                  <ext:Button runat="server" Text="Close">
                                      <Listeners>
                                          <Click Handler="#{Field3}.collapse();" />
                                      </Listeners>
                                  </ext:Button>
                              </Buttons>
                        
                              <Listeners>
                                  <CheckChange Handler="#{Field3}.setValue(getTasks(this), false);" />
                              </Listeners>
                              
                           </ext:TreePanel>
                         </Items>
                        </ext:Window>
                  </Component>
                  <Listeners>
                      <Expand Handler="debugger; this.component.items.getAt(0).getRootNode().expand(true);" Single="true" Delay="10" />
                  </Listeners>
              </ext:DropDownField>
            </Items>
        </ext:Window>        
       </form>
    </body>
    </html>
  6. #6
    Yes, it is exactly a case that I was talking about:
    I think it has appeared to fix a bug when a picker field blurs, but its picker doesn't hide.
    I can suggest to try the following solution. Please set this for the DropDownField:
    <CustomConfig>
        <ext:ConfigItem Name="mimicBlur" Value="myMimicBlur" Mode="Raw" />
    </CustomConfig>
    var myMimicBlur = function (e) {
        var me = this,
            picker = me.picker;
    
        // ignore mousedown events within the picker element
        if (!picker || !e.within(picker.el, false, true) && !e.within(App.combo.getPicker().el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
            Ext.form.field.Picker.superclass.mimicBlur.apply(me, arguments);
        }
    };
    I've added this to the original mimicBlur function:
    && !e.within(App.combo.getPicker().el, false, true)
  7. #7
    Hi, Daniil:

    Based on your suggestion this code works (I removed the triggerBlur override):

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>DropDownField Overview - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
    //      Ext.form.field.Picker.override({
    //        triggerBlur: Ext.form.field.Picker.superclass.triggerBlur
    //      });
    
          var getTasks = function (tree) {
            var msg = [], 
                selNodes = tree.getChecked();
            msg.push("[");   
                 
            Ext.each(selNodes, function (node) {
              if (msg.length > 1) {
                msg.push(",");
              }
                    
              msg.push(node.data.text);
            });
                
            msg.push("]");
                
            return msg.join("");
          };
    
          function myEventHandler(e) {
            if (!e)
              e = window.event;
    
            //IE9 & Other Browsers
            if (e.stopPropagation) {
              e.stopPropagation();
            }
            //IE8 and Lower
            else {
              e.cancelBubble = true;
            }
          }
    
          var myMimicBlur = function (e) {
            var me = this,
                picker = me.picker;
    
            // ignore mousedown events within the picker element
            if (!picker || !e.within(picker.el, false, true) && !e.within(App.combo.getPicker().el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
              Ext.form.field.Picker.superclass.mimicBlur.apply(me, arguments);
            }
          };
    
          Ext.onReady(function()
          {
    
          });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>DropDownField Overview x</h1>
            
          
           <ext:Window ID="myWindow" Layout="form" Title="My Window" Modal="True" runat="server" Width="500">
            <Items>
              <ext:DropDownField 
                  ID="Field3" 
                  runat="server" 
                  Editable="false" 
                  Width="450" 
                  AllowBlur="true"
                  TriggerIcon="SimpleArrowDown">
                  <CustomConfig>
                      <ext:ConfigItem Name="mimicBlur" Value="myMimicBlur" Mode="Raw" />
                  </CustomConfig>
                            
                  <Component>
                          <ext:TreePanel 
                              runat="server" 
                              Title="My Task List"
                              Icon="Accept"
                              Height="300"
                              Shadow="false"
                              UseArrows="true"
                              AutoScroll="true"
                              Animate="true"
                              EnableDD="true"
                              ContainerScroll="true"                    
                              RootVisible="false">
                              <TopBar>
                                <ext:Toolbar runat="server">
                                  <Items>
          <%--                           <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                                        <Items>
                                            <ext:ListItem Text="Item 1" Value="1" />
                                            <ext:ListItem Text="Item 2" Value="2" />
                                            <ext:ListItem Text="Item 3" Value="3" />
                                            <ext:ListItem Text="Item 4" Value="4" />
                                            <ext:ListItem Text="Item 5" Value="5" />
                                        </Items>
                
                                        <SelectedItems>
                                            <ext:ListItem Value="2" />
                                            <ext:ListItem Index="4" />
                                        </SelectedItems>
                                    </ext:MultiCombo>--%>
                                    <ext:ComboBox ID="combo" runat="server">
                                      <Items>
                                        <ext:ListItem Text="Item 1" Value="1" />
                                        <ext:ListItem Text="Item 2" Value="2" />
                                        <ext:ListItem Text="Item 3" Value="3" />
                                        <ext:ListItem Text="Item 4" Value="4" />
                                        <ext:ListItem Text="Item 5" Value="5" />
                                      </Items>
                                      <Listeners>                              
                                        <Select Handler=" myEventHandler(e);" />
                                      </Listeners>
                                    </ext:ComboBox>
    
                                  </Items>
                                </ext:Toolbar>
                              </TopBar>
                              <Root>
                                  <ext:Node>
                                      <Children>
                                          <ext:Node Text="To Do" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Clean house" Leaf="true" Checked="False" />
                                              </Children>
                                          </ext:Node>
                                    
                                          <ext:Node Text="Grocery List" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                            
                                                  <ext:Node Text="Energy foods" Icon="Folder">
                                                      <Children>
                                                          <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                                          <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                                      </Children>
                                                  </ext:Node>
                                              </Children>
                                          </ext:Node>
                                    
                                          <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                              <Children>
                                                  <ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                                  <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                              </Children>
                                          </ext:Node>
                                      </Children>
                                  </ext:Node>
                              </Root>
                        
                              <Buttons>
                                  <ext:Button runat="server" Text="Close">
                                      <Listeners>
                                          <Click Handler="#{Field3}.collapse();" />
                                      </Listeners>
                                  </ext:Button>
                              </Buttons>
                        
                              <Listeners>
                                  <CheckChange Handler="#{Field3}.setValue(getTasks(this), false);" />
                              </Listeners>
                              
                           </ext:TreePanel>
    
                  </Component>
                  <Listeners>
                      <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                  </Listeners>
              </ext:DropDownField>
            </Items>
        </ext:Window>        
       </form>
    </body>
    </html>
    Thank you!

Similar Threads

  1. [CLOSED] Prevent user from selecting the highlighted item Bound list by TAB
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 29, 2014, 7:30 AM
  2. Replies: 1
    Last Post: Jun 06, 2014, 6:09 AM
  3. Replies: 0
    Last Post: Jun 01, 2013, 10:41 AM
  4. Multicombo not selecting properly
    By antoreegan in forum 2.x Help
    Replies: 2
    Last Post: May 23, 2013, 11:00 AM
  5. [CLOSED] [1.0] Selecting Combobox expanded list item through Tab key
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 02, 2010, 4:54 PM

Posting Permissions