Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [CLOSED] Keyboard event being called twice in ComboBox

  1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    118

    Default [CLOSED] Keyboard event being called twice in ComboBox

    Select an item in ComboBox to fill its TextField "UI". Press "Enter". Keyboard event is being called twice.

    This is in GXT 1.1-alpha-3

  2. #2
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242

    Default

    How are you listening for the enter key event?

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    118

    Default

    Sorry, to clarify, it's in GXT 1.1 alpha 2

    All you need to do is to register KeyListener to ComboBox (that has a ListStore)

  4. #4
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242

    Default

    1.1 Alpha 4 is the most recent drop. Please try your code with Alpha 4 and GWT 1.5.2.

  5. #5
    Ext User
    Join Date
    Apr 2008
    Posts
    118

    Default This is still open

    I've added a KeyListener to the State ComboBox on the ComboBoxExample.java

    Steps:
    1) Select a State (make sure the selected showed up and populated the combobox)
    2) Press ENTER
    3) All methods keyDown, keyUp and keyPressed are called twice

    Code:
    /*
     * Ext GWT - Ext for GWT Copyright(c) 2007, 2008, Ext JS, LLC. [email protected] http://extjs.com/license
     */
    package com.extjs.gxt.samples.client.examples.forms;
    
    import com.extjs.gxt.samples.resources.client.TestData;
    import com.extjs.gxt.samples.resources.client.model.Country;
    import com.extjs.gxt.samples.resources.client.model.State;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.KeyListener;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.Info;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.VerticalPanel;
    import com.extjs.gxt.ui.client.widget.form.ComboBox;
    import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
    import com.google.gwt.core.client.GWT;
    
    public class ComboBoxExample extends LayoutContainer {
    
        public ComboBoxExample() {
            VerticalPanel vp = new VerticalPanel();
            vp.setSpacing(10);
    
            ListStore<State> states = new ListStore<State>();
            states.add(TestData.getStates());
    
            ComboBox<State> combo = new ComboBox<State>();
            combo.setEmptyText("Select a state...");
            combo.setDisplayField("name");
            combo.setWidth(150);
            combo.setStore(states);
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL);
            combo.addKeyListener(new KeyListener() {
    
                /**
                 * Fires on key down.
                 * 
                 * @param event the component event
                 */
                @Override
                public void componentKeyDown(final ComponentEvent event) {
                    Info.display("KeyListener", "componentKeyDown");
                }
    
                /**
                 * Fires on key press.
                 * 
                 * @param event the component event
                 */
                @Override
                public void componentKeyPress(final ComponentEvent event) {
                    Info.display("KeyListener", "componentKeyPress");
                }
    
                /**
                 * Fires on key up.
                 * 
                 * @param event the component event
                 */
                @Override
                public void componentKeyUp(final ComponentEvent event) {
                    Info.display("KeyListener", "componentKeyUp");
                }
            });
            vp.add(combo);
    
            states = new ListStore<State>();
            states.add(TestData.getStates());
            combo = new ComboBox<State>();
            combo.setEmptyText("Select a state...");
            combo.setDisplayField("name");
            combo.setTemplate(getTemplate());
            combo.setWidth(150);
            combo.setStore(states);
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL);
            vp.add(combo);
    
            ListStore<Country> countries = new ListStore<Country>();
            countries.add(TestData.getCountries());
    
            ComboBox<Country> combo2 = new ComboBox<Country>();
            combo2.setWidth(150);
            combo2.setStore(countries);
            combo2.setTemplate(getFlagTemplate(GWT.getModuleBaseURL()));
            combo2.setDisplayField("name");
            combo2.setTypeAhead(true);
    
            vp.add(combo2);
            add(vp);
        }
    
        private native String getTemplate() /*-{
            return  [
            '<tpl for=".">',
            '<div class="x-combo-list-item" qtip="{slogan}" qtitle="State Slogan">{name}</div>',
            '</tpl>'
            ].join("");
            }-*/;
    
        private native String getFlagTemplate(String base) /*-{
             return  [
             '<tpl for=".">',
             '<div class="x-combo-list-item"><img src="' + base + '/images/icons/fam/flags/{[values.abbr]}.png">&nbsp;{[values.name]}</div>',
             '</tpl>'
             ].join("");
             }-*/;
    
    }

  6. #6
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242

  7. #7
    Ext User
    Join Date
    Apr 2008
    Posts
    118

    Default Keyboard event being called twice in ComboBox

    This bug still exist in GXT 1.2.1

    Here's the code (the keyListener will be executed twice):

    Code:
    package com.extjs.gxt.samples.client.examples.forms;
    
    import com.extjs.gxt.samples.resources.client.TestData;
    import com.extjs.gxt.samples.resources.client.model.Country;
    import com.extjs.gxt.samples.resources.client.model.State;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.KeyListener;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.Info;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.VerticalPanel;
    import com.extjs.gxt.ui.client.widget.form.ComboBox;
    import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.user.client.ui.KeyboardListener;
    
    public class ComboBoxExample extends LayoutContainer {
    
        public ComboBoxExample() {
            VerticalPanel vp = new VerticalPanel();
            vp.setSpacing(10);
    
            ListStore<State> states = new ListStore<State>();
            states.add(TestData.getStates());
    
            ComboBox<State> combo = new ComboBox<State>();
            combo.setEmptyText("Select a state...");
            combo.setDisplayField("name");
            combo.setWidth(150);
            combo.setStore(states);
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL);
            combo.addKeyListener(new KeyListener() {
    
                /**
                 * Fires on key press.
                 * 
                 * @param event the component event
                 */
                @Override
                public void componentKeyPress(final ComponentEvent event) {
                    if (event.getKeyCode() == KeyboardListener.KEY_ENTER) {
                        Info.display("Test", "Test Test");
                    }
                }
    
            });
            vp.add(combo);
    
            states = new ListStore<State>();
            states.add(TestData.getStates());
            combo = new ComboBox<State>();
            combo.setEmptyText("Select a state...");
            combo.setDisplayField("name");
            combo.setTemplate(getTemplate());
            combo.setWidth(150);
            combo.setStore(states);
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL);
            vp.add(combo);
    
            ListStore<Country> countries = new ListStore<Country>();
            countries.add(TestData.getCountries());
    
            ComboBox<Country> combo2 = new ComboBox<Country>();
            combo2.setWidth(150);
            combo2.setStore(countries);
            combo2.setTemplate(getFlagTemplate(GWT.getModuleBaseURL()));
            combo2.setDisplayField("name");
            combo2.setTypeAhead(true);
            combo2.setTriggerAction(TriggerAction.ALL);
    
            vp.add(combo2);
            add(vp);
        }
    
        private native String getTemplate() /*-{
                   return  [
                   '<tpl for=".">',
                   '<div class="x-combo-list-item" qtip="{slogan}" qtitle="State Slogan">{name}</div>',
                   '</tpl>'
                   ].join("");
                   }-*/;
    
        private native String getFlagTemplate(String base) /*-{
                    return  [
                    '<tpl for=".">',
                    '<div class="x-combo-list-item"><img src="' + base + '/images/icons/fam/flags/{[values.abbr]}.png">&nbsp;{[values.name]}</div>',
                    '</tpl>'
                    ].join("");
                    }-*/;
    
    }

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You need to stop the event.

  9. #9
    Ext User
    Join Date
    Apr 2008
    Posts
    118

    Default

    Quote Originally Posted by sven View Post
    You need to stop the event.
    What?

    I installed one listener to the ComboBox and I expect that to be called once if I hit enter once. That is the expected behavior.

  10. #10
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Stop the event and it works is what i meant.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •