1. #1
    connysvensson
    Guest

    Default Table columns too wide, doesn't align

    Table columns too wide, doesn't align


    I have a table inside a content panel with a top toolbar and a bottom paging toolbar. The table is too wide and spans outside the content panel container. This is in IE standalone and hosted mode. It looks correct in FF. I have attached a screenshot and the code below shows how the table is setup.

    I can get it to look ok if I set an explicit width (900). I've tried with setAutoWidth(true). The result I want is for it to automatically fill the width, the same way the toolbars are doing. Is see it as a big problem if you have to specify a fixed width and height (can I get the height to auto size depending on content?) for the UI to align correctly. In the end it's all rendered as a DOM tree and these things are pretty straightforward in plain old HTML.

    The code below shows how my class which is exending the ContentPanel class is setup.

    Code:
    final protected ToolBar toolBar = new ToolBar();
    final PagingToolBar pagingBar = new PagingToolBar(50);
    final protected Table table = new Table();
    
    @Override
    protected void onRender(Element parent, int index) {
            super.onRender(parent, index);
    
            setHeaderVisible(false);
            setBorders(false);
            setLayout(new FillLayout());
    
            table.setSelectionModel(new RowSelectionModel(SelectionMode.SINGLE));
            table.setBorders(false);
            table.setHeight(300);
    
            List<TableColumn> columns = new ArrayList<TableColumn>();
            columns.add(new TableColumn(EmployeeProperties.FIRSTNAME, res.firstNameLbl(), .2f));
            columns.add(new TableColumn(EmployeeProperties.LASTNAME, res.lastNameLbl(), .2f));       
            columns.add(new TableColumn(EmployeeProperties.USERID, res.userIdLbl(), .1f));
            columns.add(new TableColumn(EmployeeProperties.SAPID, res.sapIdLbl(), .1f));
            columns.add(new TableColumn(EmployeeProperties.POSITION, res.positionLbl(), .2f));
            columns.add(new TableColumn(EmployeeProperties.WORKPERCENTAGE, res.workPercentageLbl(), .1f));
            TableColumn col = new TableColumn(EmployeeProperties.STARTDATE, res.startDateLbl(), .1f);
            col.setRenderer(new DateTimeCellRenderer("y-MM-dd"));
            columns.add(col);
            table.setColumnModel(new TableColumnModel(columns));
    
            editBtn = new TextToolItem(globalResources.editBtn(), "icon-add");
            editBtn.setEnabled(false);        
            toolBar.add(editBtn);
            toolBar.add(new SeparatorToolItem());
            
            add(table);
    
            setTopComponent(toolBar);
            setBottomComponent(pagingBar);
    
            layout();
    }
    Attached Images

  2. #2
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    where is the table being added to the contentpanel?

  3. #3
    connysvensson
    Guest

    Default


    Sorry, I cut out the part where I added the edit button to the toolbar and accidentally removed the add(table) part as well.

  4. #4
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    connysvensson,
    can't see anything initially wrong - provide a complete code snippet that compiles without needing special classes from you etc and I can take a look - otherwise not sure what is intially wrong...

  5. #5
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    oh, a thought - take out the setHeight() and set the content panel size(500,500); that should fix it...

  6. #6
    connysvensson
    Guest

    Default


    Thanks!
    That did it, but I just set the height not the width (I want it to automatically fill the available width). So I simply changed table.setHeight(300) to setHeight(400). So clearly setting the height of a child component also affects the width for some reason, or dou you have a better explanation why setting the height of the container instead of the child fixed the problem?

  7. #7
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    current Table and Tree widgets are quick hacks from the old myGWT and are not as nicely behaved as other widgets... (i think)

    the developer (Darrell) is going to redo the Table into a Grid (Ext term) and this should get things working better

    so currently the table must either be fully sized (by height and width) or be fully sized by its parent (which is what the setheight on contentpanel did)

    make sense?

Thread Participants: 1