Results 1 to 5 of 5

Thread: Ext.ux.tree.TreeGrid with many columns bug?

  1. #1

    Default Ext.ux.tree.TreeGrid with many columns bug?

    hi.

    i use this component with a large number of large columns. when the tree does not fit the width of the screen, a horizontal scroll bar is enabled. the title of the tree does not notice the column width and fits within the width of the screen, but the column with values beyond the screen.

    part of my code:
    Code:
        tree = new Ext.ux.tree.TreeGrid({
          title: 'big tree',
          enableSort : false,
          autoScroll : true,
          renderTo: Ext.getBody(),
    
          columns:[
            { header: 'big header',
              width: 250,
              dataIndex: 'Ind',
              sortType: 'none' },
            { header: 'header',
              width: 150,
              dataIndex: 'Ind',
              sortType: 'none' },
            { header: 'header',
              width: 150,
              dataIndex: 'Ind',
              sortType: 'none' },
            { header: 'header',
              dataIndex: 'Ind',
              width: 100,
              sortType: 'none' },
            { header: 'hd',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'hd',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header ',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header ',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header',
              width: 100,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header',
              width: 200,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header ',
              width: 200,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header',
              width: 200,
              dataIndex: 'Ind',
              sortType: 'none'},
            { header: 'header',
              width: 200,
              dataIndex: 'Ind',
              sortType: 'none'},
          ]
          });
    ?ow can i set the column width, together with the title?

  2. #2

    Default

    I have noticed that the horizontal scroll doesn't work until there are actually rows of data. It appears the width of the row of data actually makes the parent panel realize it needs a scroll bar, but the width of the columns do not.

  3. #3
    Sencha User sideeque's Avatar
    Join Date
    Aug 2009
    Location
    Washington DC
    Posts
    50

    Default

    I have the same problem.

    The total width of the grid/tree is 320.

    And total width of each column is 500.

    I am expecting a horizontal scroll to be there to see the portion which exceeds 320 width of Grid/Tree.


    Does anybody have fix for this?

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Austria
    Posts
    87

    Default

    i had similar problems with the width of my TreeGrid and wrote a Extension that allows you to define
    a flex value for every column. Now my TreeGrid always fits the available size, maybe thats a workaround
    for your problem too.

    Note: you can define flex values that add up to more than 1, but on the first call of updateColumnWidths it will be "normalized" to 1.

    Code:
    updateColumnWidths : function() {
            var totalWidth = this.getWidth() - 30;
            var cols = this.columns,
                colCount = cols.length,
                groups = this.outerCt.query('colgroup'),
                groupCount = groups.length,
                c, g, i, j;
    
            var totalFlex = 0;
            for(i = 0; i<colCount; i++) {
                totalFlex += cols[i].flex;
            }
            if(totalFlex!=1){
                for(i = 0; i<colCount; i++) {
                    cols[i].flex = cols[i].flex/totalFlex;
                }
            }
    
            for(i = 0; i<colCount; i++) {
                c = cols[i];
                if(c.width && Math.abs(c.width-totalWidth*c.flex)>2){
                    var newFlex = (c.width/totalWidth);
                    if(i<(colCount-1)){
                        cols[(i+1)].flex += (c.flex - newFlex);
                        cols[(i+1)].width = totalWidth * cols[(i+1)].flex;
                    }
                    c.flex = newFlex;
                }
                c.width = totalWidth*c.flex;
                for(j = 0; j<groupCount; j++) {
                    g = groups[j];
                    g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
                }
            }
            var len;
            for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
                c = Ext.fly(groups[i]);
                if(cols[i] && cols[i].hidden) {
                    c.addClass('x-treegrid-hd-hidden');
                }
                else {
                    c.removeClass('x-treegrid-hd-hidden');
                }
            }
    
            var tcw = this.getTotalColumnWidth();
            Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
            this.outerCt.select('table').setWidth(tcw);
            this.syncHeaderScroll();
        },
    [EDIT] Putting the code in updateColumnWidth will disable column resizing if you have more then 2 columns

  5. #5
    Sencha Premium User
    Join Date
    Dec 2009
    Posts
    83

    Default

    Hi Nesta,

    could you please post the complete code of your resizing ColumnTree? If i just add your updateColumnWidths i only get errors about undefined things (innerHd, outerCt and so on).

    Thanks!

    Yours
    Thomas

Posting Permissions

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