You found a bug! We've classified it as EXTGWT-1933 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      0  

    Default A ProgressBarCell used in a grid doesn't resize according to the column width

    A ProgressBarCell used in a grid doesn't resize according to the column width


    Version of Ext GWT
    3.0 Release Candidate 2

    Browser versions and OS
    • Internet Explorer 8, FF11 & Chrome 18 on Windows 7 Professional SP1

    Virtual Machine
    No

    Description
    We use a ProgressBarCell to render percentage values in a certain grid column.

    Run mode
    Development/Production mode

    Steps to reproduce the problem
    1. Run the application.
    2. Resize the column (by dragging the column divider)

    Expected result
    The ProgressBarCell keeps showing the right percentage in text as well as in its blue/white proportions.

    Actual result
    The ProgressBarCell keeps showing the right percentage in its text only. It doesn't resize according to the grid cell's width.

    Test case
    Code: ProgressBarGrid.java, BaseExample.java & Progress.java

    Helpful Information



    Screenshot

    Debugging already done
    • In the constructor of ProgressBarCell we detected the line
      Code:
      this.width = 300;
      and indeed if we make the column 300 pixels wide, only then it looks OK.
      So apparently the width of the ProgressBarCell is not adapted when the column is resized.
      Although, since ProgressBarCell extends ResizeCell one would expect it to follow the vairiable column width.
      Or do we forget something?

  2. #2
    Sencha User WesleyMoy's Avatar
    Join Date
    Oct 2009
    Location
    Redwood City, California
    Posts
    402
    Vote Rating
    2
    WesleyMoy is on a distinguished road

      0  

    Default


    Thanks for pointing this out. I've filed a bug for one of the engineers to take a look at and will update here with any changes we make.

  3. #3
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      0  

    Default


    No update was posted in this thread.
    Nevertheless I read in the Release Notes of GXT 3.0.0 (where btw, currently the paragraph title "Bug Fixes" is missing)
    • [EXTGWT-1933] - Progress bar scales, but its value does not
    But when I run my test case again with GXT 3.0.0 I see that it is not solved.

    Rather confusing.

  4. #4
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      0  

    Default


    Any clarification from Sencha on this would really be appreciated

  5. #5
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    So apparently the width of the ProgressBarCell is not adapted when the column is resized.
    Although, since ProgressBarCell extends ResizeCell one would expect it to follow the vairiable column width.
    ResizeCell doe not mean that it resizes automatically. It means that you could resize it. Our datawidgets do not automatically resize their cells. You could listen to the ColumnWidthChange event and resize the cell manually for now.

  6. #6
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      0  

    Default


    >> Our datawidgets do not automatically resize their cells
    I hope you agree that in this case, as a user of the GXT lib, you expect the progress bar to nicely resize whenever the column width does without having to program anything extra.

    >> You could listen to the ColumnWidthChange event
    How is that done? By calling setColumnWidthChangeHandler()? On what object?

    >> and resize the cell manually for now.
    How?

  7. #7
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    The event is fired by the ColumnModel (addColumnWidthChangeHandler). You than will need to call the setWidth method on the cell to update the width. After that you will need to refresh the grid view.

  8. #8
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    For the automated resizing:

    The problem is that GWT cell containers behave differently, they would not resize their containing cells. They do not even know our interface. Nevertheless, the ticket is open and we will take another look at it.

  9. #9
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      1  

    Default


    The event is fired by the ColumnModel (addColumnWidthChangeHandler). You than will need to call the setWidth method on the cell to update the width. After that you will need to refresh the grid view.
    Thanks.
    For now, this code makes it work as expected:
    Code:
           columnModel.addColumnWidthChangeHandler(new ColumnWidthChangeEvent.ColumnWidthChangeHandler() {
                public void onColumnWidthChange(ColumnWidthChangeEvent event) {
                    if (event.getColumnConfig().getHeader().asString().equals("Progress")) {
                        progressBarCell.setWidth(event.getColumnConfig().getWidth() - 10 );
                        grid.getView().refresh(true);
                    }
                }
            });
    Remark:
    I don't know yet how I should replace that hard coded 10 by the left and right cell padding (each 5px) from the grid.
    I tried these
    Code:
    grid.getElement().getStyle().getPaddingLeft();
    grid.getElement().getStyle().getPaddingright();
    but they don't return anything...

    Nevertheless, the ticket is open and we will take another look at it.
    That would be great.

  10. #10
    Ext GWT Premium Member gdlm's Avatar
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    208
    Vote Rating
    4
    gdlm is on a distinguished road

      0  

    Default


    Unfortunately it does NOT work in this (layout) case:

    Code:
    public class ProgressBarGrid extends BaseExample{
    
        public Widget asWidget() {
            ProgressProperties props = GWT.create(ProgressProperties.class);
    
            ColumnConfig<Progress, String> textColumnConfig = new ColumnConfig<Progress, String>(props.text(), 100, "Text");
            ColumnConfig<Progress, Double> progressColumnConfig = new ColumnConfig<Progress, Double>(props.value(), 100, "Progress");
            final ProgressBarCell progressBarCell = new ProgressBarCell();
            final int padding = 10;
            progressBarCell.setWidth(progressColumnConfig.getWidth() - padding );
            progressColumnConfig.setCell(progressBarCell);
            progressBarCell.setProgressText("{0}%");
    
            List<ColumnConfig<Progress, ?>> columnConfigsList = new ArrayList<ColumnConfig<Progress, ?>>(2);
            columnConfigsList.add(textColumnConfig);
            columnConfigsList.add(progressColumnConfig);
    
            ColumnModel<Progress> columnModel = new ColumnModel<Progress>(columnConfigsList);
            ListStore<Progress> store = new ListStore<Progress>(props.textKey());
    
            final Grid grid = new Grid<Progress>(store, columnModel);
            grid.setAllowTextSelection(true);
            columnModel.addColumnWidthChangeHandler(new ColumnWidthChangeEvent.ColumnWidthChangeHandler() {
                public void onColumnWidthChange(ColumnWidthChangeEvent event) {
                    if (event.getColumnConfig().getHeader().asString().equals("Progress")) {
                        progressBarCell.setWidth(event.getColumnConfig().getWidth() - padding);
                        grid.getView().refresh(true);
                    }
                }
            });
    
            store.addAll(getDummyNames());
    
    
            VerticalLayoutContainer verticalLayoutContainer = new VerticalLayoutContainer();
            verticalLayoutContainer.add(grid, new VerticalLayoutContainer.VerticalLayoutData(1, 1, new Margins(0)));
            verticalLayoutContainer.add(new Label("Resize the 2nd column. Filed @ Sencha forum against GXT 3.0 RC2. Accepted as bug [EXTGWT-1933].")
                , new VerticalLayoutContainer.VerticalLayoutData(1, 25, new Margins(0)));
            verticalLayoutContainer.add(new Label("Is mentioned as bug fix in the 3.0.0 Release Notes but is NOT fixed.")
                ,new VerticalLayoutContainer.VerticalLayoutData(1, 25, new Margins(0)));
            verticalLayoutContainer.add(new Label("-")
                ,new VerticalLayoutContainer.VerticalLayoutData(1, 25, new Margins(0)));
            verticalLayoutContainer.add(new Label("Currently we apply a workaround (cf. code)")
                ,new VerticalLayoutContainer.VerticalLayoutData(1, 25, new Margins(0)));
    
            SimpleContainer simpleContainer = new SimpleContainer();
            simpleContainer.setSize("1000px", "400px");
            simpleContainer.add(verticalLayoutContainer);
            simpleContainer.forceLayout();
            grid.getView().setAutoFill(true);
    
            return simpleContainer;
        }
    
        private List<Progress> getDummyNames() {
            return Arrays.asList(new Progress("Test1", 0.50), new Progress("Test2",0.75));
        }
    
        public interface ProgressProperties extends PropertyAccess<Progress> {
            @Editor.Path("text")
            ModelKeyProvider<Progress> textKey();
    
            ValueProvider<Progress, String> text();
    
            ValueProvider<Progress, Double> value();
        }
    }
    In the case where the "Text" column is 100 pixels and the "Progress" column can take up all the rest of the space, apparently no ColumnWidthChangeEvent is thrown.
    Also, when resizing (or hiding - via the popup menu) the "Text" column nothing happens.
    When the "Progress" column is resized, the width is adpated, but not with the right width.

    So, I guess that the work around of the addColumnWidthChangeHandler() is OK for the case where the user resizes that column, but not for the case where the "Progress" column's size is adapted programmatically due to layout resizing.
    What else do I have to add as workaround for this case?