Results 1 to 7 of 7

Thread: Bug: RowEditor editing a row can't click to set focus on fields GXT 2.2.5

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    10

    Default Bug: RowEditor editing a row can't click to set focus on fields GXT 2.2.5

    Versions:
    GWT 2.4.0
    GXT 2.2.5

    Browsers Tested(Windows):
    IE8
    Firefox 3.6

    Problem:
    In IE8 I have a Grid with a RowEditor plugin. When editing I have a row with a TextField, ComboBox, NumberField, and DateField but unless I click on text which is inside an editable field I can not click to set the focus on any of the fields. Firefox 3.6 doesn't have this problem. If I use the sencha.com/examples and try the RowEditor Grid using IE8 I can not reproduce the problem.

    Demonstrate the problem:
    Code:
    import java.util.ArrayList;
    import java.util.List;
    
    
    import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
    import com.extjs.gxt.ui.client.data.BaseModel;
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.form.DateField;
    import com.extjs.gxt.ui.client.widget.form.NumberField;
    import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
    import com.extjs.gxt.ui.client.widget.form.TextField;
    import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
    import com.extjs.gxt.ui.client.widget.grid.CellEditor;
    import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
    import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
    import com.extjs.gxt.ui.client.widget.grid.Grid;
    import com.extjs.gxt.ui.client.widget.grid.RowEditor;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.i18n.client.DateTimeFormat;
    import com.google.gwt.i18n.client.NumberFormat;
    
    
    public class PopupRowEditorTestTable extends Window 
    {
        private DateTimeFormat df = DateTimeFormat.getFormat("MM/dd/y");
    
    
        public PopupRowEditorTestTable()
        {
            super();
                
            setLayout(new FitLayout());
    
    
            final SimpleComboBox<String> combo = new SimpleComboBox<String>();
            combo.setForceSelection(true);
            combo.setTriggerAction(TriggerAction.ALL);
            combo.add("Bob");
            combo.add("Harry");
            combo.add("Frank");
            
            TextField<String> inputText = new TextField<String>();
            inputText.setAllowBlank(false);
            
            List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
            
            ColumnConfig column = new ColumnConfig();  
            column.setId("TEXT");  
            column.setHeader("text");  
            column.setWidth(220);  
            column.setEditor(new CellEditor(inputText));
            configs.add(column);
            
            CellEditor editor = new CellEditor(combo) {  
                @Override  
                public Object preProcessValue(Object value) {  
                  if (value == null) {  
                    return value;  
                  }  
                  return combo.findModel(value.toString());  
                }  
            
                @Override  
                public Object postProcessValue(Object value) {  
                  if (value == null) {  
                    return value;  
                  }  
                  return ((ModelData) value).get("value");  
                }  
              };  
            
              column = new ColumnConfig();  
              column.setId("COMBO");  
              column.setHeader("combo");  
              column.setWidth(65);  
              column.setEditor(editor);  
              configs.add(column);  
              
              column = new ColumnConfig();  
              column.setId("NUMBER");  
              column.setHeader("number");  
              column.setAlignment(HorizontalAlignment.RIGHT);  
              column.setWidth(55);  
              column.setNumberFormat(NumberFormat.getCurrencyFormat());  
              column.setEditor(new CellEditor(new NumberField()));  
              
              configs.add(column);  
              
              DateField dateField = new DateField();  
              dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));  
            
              column = new ColumnConfig();  
              column.setId("DATE");  
              column.setHeader("date");  
              column.setWidth(95);  
              column.setEditor(new CellEditor(dateField));  
              column.setDateTimeFormat(DateTimeFormat.getFormat("MMM dd yyyy"));  
              configs.add(column);  
              
              ColumnModel cm = new ColumnModel(configs);  
              
              List<ModelData> models = new ArrayList<ModelData>();
              BaseModel model = new BaseModel();
              model.set("COMBO", "Bob");
    
    
              model.set("TEXT", "delete, click off, try to regain focus by clicking");
    
    
              model.set("NUMBER", 2.3);
              model.set("DATE", df.parse("03/15/2006"));
              models.add(model);
              
              ListStore<ModelData> store = new ListStore<ModelData>();
              store.add(models);
              
              final RowEditor<ModelData> re = new RowEditor<ModelData>();  
              final Grid<ModelData> grid = new Grid<ModelData>(store, cm);  
              grid.setAutoExpandColumn("TEXT");  
              grid.setBorders(false);  
              grid.addPlugin(re);
              grid.getView().setForceFit(true);
              grid.getView().setAutoFill(true);
                    
              add(grid);
              setSize(600, 150);
        }
        
        
    }
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    10

    Default

    Hmm, so I guess I'm the only one having trouble with the RowEditor in 2.2.5?

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    15

    Default

    The issue is coming from the Window component, it is stealing the focus from your field, because the field is into a Cell, and the SelectionModel for the grid or even for the roweditor, do not comply with Window management of Focus.

    your need to override the handleMouseClick(GridEvent e) from the GridSelectionModel,
    let it do it s super stuff
    if(isInput(e.getTarget()))
    then
    refWindow.setFocusWidget(current_field),
    refWindow.focus();

    current_field can be found, from the selected item from the event
    refWindow needs to be replaced by your current this object.

    If Sven has a nicer explanation and solution, I also would like to know how to regain full access to selecting the text input into my field, using the Mouse down event. I can only use my keybord when the grid is into a Window.

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

    Default

    Try to extend window and clear out the doFocus method.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    15

    Default

    Hi Sven,

    Do you think ithis is why the text from the input field cannot be selected using mouse pointer?

    Without overriding Window, with my method, I can gain focus on the text field, but I cannot select the text.
    I can only use the keyboard to change the text.

    Thank you for your answer.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    1

    Default

    Hi Somuchh8,

    I am also getting the same problem, did you find any solution for that?

    Regards,
    Nagesh

  7. #7

    Default Not able to hold the focus in Grid cell in Gxt 3.1.4

    Hi,

    I am using GridInlineEditing where I am trying to use a StringComboBox as editor. When I click the combo box to change value the cell is stealing the focus not allowing me to change the value in Combo Box. How to Gain the focus or resolve it.?

    I am using Gxt 3.1.4

Posting Permissions

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