Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-3006 in 3.1.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Vote Rating
    0
    subendu is on a distinguished road

      0  

    Question Grid column alignment issue while editing the row

    Grid column alignment issue while editing the row


    Hi,
    I am using row editable grid. While editing the grid row I am facing column misalignment issue.
    Please see the attached snapshot.


    columnMisalignmentIssue.jpg



    Regards,
    Subendu

  2. #2
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Vote Rating
    0
    subendu is on a distinguished road

      0  

    Default


    Any solution for this?

  3. #3
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Vote Rating
    0
    subendu is on a distinguished road

      0  

    Default


    Please let me know if any work around for this?

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    545
    Vote Rating
    17
    branflake2267 will become famous soon enough

      0  

    Default


    Sorry for the delay, SenchaCon has slowed us down a little this week.

    I did a quick test and it appears labels are causing a calculation issue with the row editing alignments. So this looks like a bug. I'm looking for a workaround.

    Could I confirm which version of GXT you are using?
    Last edited by branflake2267; 18 Jul 2013 at 8:58 AM. Reason: grammer fix

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    545
    Vote Rating
    17
    branflake2267 will become famous soon enough

      0  

    Default


    I've found a workaround which uses the TextField and changes the TextField css and behavior to act like a label.

    The best method I've found as a workaround so far is override the class in the TextInputCell. We are going to make some improvements in an upcoming release so this is easier, but here is a workaround to get going.

    First I created a client bundle so I could setup some custom css and I also created an instance of the TextFieldResources (TextFieldResources is in the GXT lib) which has the original style resources. I marked modified next to the source items I changed from the original appearance source.
    Code:
    public interface CustomCssResources extends ClientBundle {
        // provides the original style resources
        public static final TextFieldResources INSTANCEOF_TEXT_FIELD_RESOURCES = GWT.create(TextFieldResources.class);
        // provides the new CustomCssResources which can override the original css resources. 
        public static final CustomCssResources INSTANCEOF_CUSTOM_CSS =  GWT.create(CustomCssResources.class);
    
    
        public interface CSSStyles extends CssResource {
          String customStyle();
        }
    
    
        // link the custom css stylesheet, which only has one style at this time
        @Source("style.css")
        public CSSStyles css();
      }
    Next I created the style.css file. This sits in the same package as CustomCssResources.java.
    Code:
    // file "style.css" sits in the same package as CustomCssResources
    .customStyle {
      border: 0px solid !important;
      background: transparent !important;
    }
    Next I created my own TextFieldAppearanceCustom class and created an override for render which I inject the css and add the class which gets rid of the TextField input border and background and causes it to look like a label.
    Code:
     public class TextFieldAppearanceCustom extends TextFieldDefaultAppearance {
        public TextFieldAppearanceCustom() {
          super();
          
          // MODIFIED: ensures the css is ready to go on render
          CustomCssResources.INSTANCEOF_CUSTOM_CSS.css().ensureInjected();
        }
        
        @Override
        public void render(SafeHtmlBuilder sb, String type, String value, FieldAppearanceOptions options) {
          String inputStyles = "";
          String wrapStyles = "";
    
    
          int width = options.getWidth();
    
    
          String name = options.getName() != null ? " name='" + options.getName() + "' " : "";
          String disabled = options.isDisabled() ? "disabled=true" : "";
    
    
          boolean empty = false;
    
    
          if ((value == null || value.equals("")) && options.getEmptyText() != null) {
            value = options.getEmptyText();
            empty = true;
          }
    
    
          if (width != -1) {
            wrapStyles += "width:" + width + "px;";
            width = adjustTextAreaWidth(width);
            inputStyles += "width:" + width + "px;";
          }
          
          TextFieldStyle style = CustomCssResources.INSTANCEOF_TEXT_FIELD_RESOURCES.css();
          String cls = style.text() + " " + style.field();
          if (empty) {
            cls += " " + style.empty();
          }
    
    
          // MODIFIED: add the custom css which will do away with border and background, so that it blends in as if its a label
          cls += " " + CustomCssResources.INSTANCEOF_CUSTOM_CSS.css().customStyle();
          
          String ro = options.isReadonly() ? " readonly" : "";
    
    
          value = SafeHtmlUtils.htmlEscape(value);
    
    
          sb.appendHtmlConstant("<div style='" + wrapStyles + "' >"); // class='" + style.wrap() + "'
          sb.appendHtmlConstant("<input " + name + disabled + " value='" + value + "' style='" + inputStyles + "' type='"
              + type + "' class='" + cls + "'" + ro + ">");
        }
      }
    Then finally before the grid editing, I instantiated the new custom appearance like the snippet below. I did this in the grid row editor sample. Instantiating the TextField with TextInputCell which instantiates the custom appearance TextFieldAppearanceCustom allows the appearance to be overridden.
    Code:
          // Instantiate a custom appearance for the TextCell, which will be set as read only
          // This will make the textfield emulate the look of a label
          TextFieldAppearance customAppearance = new TextFieldAppearanceCustom();
          TextInputCell textCell = new TextInputCell(customAppearance);
          textCell.setReadOnly(true);
          TextField textField = new TextField(textCell);
          
          // This is from the explorer grid row sample
          final GridEditing<Plant> editing = createGridEditing(grid);
          editing.addEditor(cc1, textField);
    This is bit more verbose than I was hoping it to be, but I found it provided a way to override the style of the TextField allowing it to look like a label that could not be modified. We are now looking at improving this in the 3.0.6 or 3.0.7 release and will update this thread on more improvements.

    Do you think this workaround would work for you?
    Last edited by branflake2267; 18 Jul 2013 at 2:41 PM. Reason: fix wording

  6. #6
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    93
    Vote Rating
    0
    subendu is on a distinguished road

      0  

    Default


    Hi,
    Thanks for the reply. Currently I am using GXT-3.0.4 .
    I will check with the workaround you have mentioned.

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    545
    Vote Rating
    17
    branflake2267 will become famous soon enough

      0  

    Default


    I'm adding this workaround for the number fields in the row editor. This allows the number field to behave like a label when in row editing.

    Create a custom css resources class:
    Code:
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
    import com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldResources;
    
    
    public interface CustomCssResources extends ClientBundle {
        // provides the original style resources
        public static final TextFieldResources INSTANCEOF_TEXT_FIELD_RESOURCES = GWT.create(TextFieldResources.class);
        // provides the new CustomCssResources which can override the original css resources. 
        public static final CustomCssResources INSTANCEOF_CUSTOM_CSS =  GWT.create(CustomCssResources.class);
    
    
    
    
        public interface CSSStyles extends CssResource {
          String customStyle();
        }
    
    
    
    
        // link the custom css stylesheet, which only has one style at this time
        @Source("style.css")
        public CSSStyles css();
      }

    Created style.css file relative to the custom resource class.
    Code:
    /* style.css */
    .customStyle {
      border: 0px solid !important;
      background: transparent !important;
    }

    This incorporates the work around when the row editor renders the editing inputs. Instead of the input appearing it will appear and styling will make it look like a label. (This is getting an upgrade in our core product shortly, so a workaround doesn't need to be used.)
    Code:
    public class TwinTriggerFieldDefaultAppearanceCustom extends TwinTriggerFieldDefaultAppearance {
      public TwinTriggerFieldDefaultAppearanceCustom() {
        super();
        
        // MODIFIED: ensures the css is ready to go on render
        CustomCssResources.INSTANCEOF_CUSTOM_CSS.css().ensureInjected();
      }
      
      @Override
      public void render(SafeHtmlBuilder sb, String value, FieldAppearanceOptions options) {
        String inputStyles = "";
        String wrapStyles = "";
    
    
        int width = options.getWidth();
        String name = options.getName() != null ? " name='" + options.getName() + "' " : "";
        String disabled = options.isDisabled() ? "disabled=true" : "";
    
    
        boolean empty = false;
        if ((value == null || value.equals("")) && options.getEmptyText() != null) {
          value = options.getEmptyText();
          empty = true;
        }
    
    
        if (width != -1) {
          wrapStyles += "width:" + width + "px;";
          inputStyles += "width:" + width + "px;";
        }
        
        TextFieldStyle style = CustomCssResources.INSTANCEOF_TEXT_FIELD_RESOURCES.css();
        String cls = style.text() + " " + style.field();
        if (empty) {
          cls += " " + style.empty();
        }
    
    
        // MODIFIED: add the custom css which will do away with border and background, so that it blends in as if its a label
        cls += " " + CustomCssResources.INSTANCEOF_CUSTOM_CSS.css().customStyle();
        
        String ro = options.isReadonly() ? " readonly" : "";
        value = SafeHtmlUtils.htmlEscape(value);
    
    
        sb.appendHtmlConstant("<div style='" + wrapStyles + "' >"); // class='" + style.wrap() + "'
        sb.appendHtmlConstant("<input " + name + disabled + " value='" + value + "' style='" + inputStyles + "' class='" + cls + "'" + ro + ">");
      }
    }
    Wire the new appearance that makes the input behave like a label into the grid row editor like this.
    Code:
    TwinTriggerFieldAppearance numberAppearance = new TwinTriggerFieldDefaultAppearanceCustom();
    NumberInputCell numberCell = new NumberInputCell(new NumberPropertyEditor.IntegerPropertyEditor(), numberAppearance);
    numberCell.setReadOnly(true);
    DoubleField doubleField = new DoubleField(numberCell);
    // column editor
    editing.addEditor(cc5, doubleField);
    Last edited by branflake2267; 5 Sep 2013 at 2:48 PM. Reason: formatting correction

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
    jjoe64 is on a distinguished road

      0  

    Default


    I have the same issue. I'm using the GPL Version 3.0.1.

    Is the problem fixed? Or do I have to use the workaround above?

  9. #9
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    545
    Vote Rating
    17
    branflake2267 will become famous soon enough

      0  

    Default


    We are currently working on this issue and vetting the api behavior in our changes. While it hasn't gone out yet, an override can be provided to workaround with how the text is rendered. One of the ways, GridRowEditing.doStartEditing(ColumnConfig<M, N> c, M value) can be overridden and Label configuration can be modified to use the cell renderer.

    Brandon

  10. #10
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    545
    Vote Rating
    17
    branflake2267 will become famous soon enough

      0  

    Default


    Just a update, 3.1.0 will include a nifty editing label renderer. It will be out soon.

    Brandon

Thread Participants: 2