tree.ColumnTree column width declaration using %

[salaccosmin]

Hi
I have a ‘Ext.ux.tree.ColumnTree’ with a declared width = ‘100%’. Inside, I define 3 columns and I would like to declare width for this columns in ‘%’( something like ‘30%’,’30%’ and ‘40%’). If I use ‘%’ in width declaration, it won’t work (both IE and FF) and I am forced to declare width in px.
Do you have any idée for my problem?
Thanks

[emily]

Hiya,

I now have the same requirement (column widths as percentages), so I am going to have a look at the code for grids and see how they do it.

If I come up with a good solution I will post it back.

Let me know if you have already done this though

Em

[silve69]

Hello friends,

Did you find some solution???
Bets regards,

Silver

[emily]

Kinda, but it isn't very nice. I have done it so that the ColumnTree can be set to fill its container. I set it up so that you have to put an 'autoExpand' config attribute in, then it takes whatever dimensions you have given your columns and keeps their ratio. This means you can give them in %, but you can also use px and not have it expand.

Basically getting the header to resize was ok, but for the tree nodes, I had to edit renderElements in ColumnNodeUI to give them another class 'depth-' + i where i is the column id, then go through and resize the element widths.

This is my resize callback:

'resize': {
    fn: function(ob, adjWidth, adjHeight, rawWidth, rawHeight) {
        if (adjWidth && adjHeight) {
            if (this.autoExpand) {
                this.setSize(ob.getInnerWidth());
                this.headers.setWidth(ob.getInnerWidth());
                this.innerCt.setWidth(ob.getInnerWidth() - 19);
                var totalWidth = 0;
                for (var i = 0; i < this.columns.length; i++) {
                    totalWidth += this.columns[i].width;
                }
                var availWidth = adjWidth;
                var multiplier = (availWidth - 19) / totalWidth;
                for (var i = 0; i < this.columns.length; i++) {
                    this.columns[i].width = this.columns[i].width * multiplier;
                }
                var headerCols = this.headers.dom.children;
                for (var i =0; i < headerCols.length; i++) {
                    if (i < this.columns.length) {
                        if (i == 0) {
                            headerCols[i].style.width = (this.columns[i].width - 2 * this.borderWidth) + 'px';
                        } else {
                            headerCols[i].style.width = (this.columns[i].width - this.borderWidth) + 'px';
                        }
                    }
                }
                if (this.root.childNodes.length > 0) {
                    var cols = Ext.select('div.x-tree-col').elements;
                    var depth_re = /depth-(\d+)/;
                    for (var data_i = 0; data_i < cols.length; data_i++) {
                        if (cols[data_i].className) {
                            match = depth_re.exec(cols[data_i].className)
                            if (!!match) {
                                var i = match[1];
                                if (i == '0') {
                                    cols[data_i].style.width = this.columns[i].width -  2 * this.borderWidth + 'px';
                                } else {
                                    cols[data_i].style.width = this.columns[i].width - this.borderWidth + 'px';
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

I don't think it is a good solution which is why I hadn't posted it back yet.

What I think ought to happen is that you create CSS classes ('depth-' +coulmn_index) when you are creating the elements, then change the width attribute in those css classes. I don't think I know how to do this (although I haven't really researched it).

Anyone got any better ideas?

[dommellenny]

i haven't worked it out myself
but it should be easy enough by using anchorlayout

var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize: {width:800, height:600},
    items:[{
        title:'Item 1',
        html:'Content 1',
        width:800,
        anchor:'right 20%'
    },{
        title:'Item 2',
        html:'Content 2',
        width:300,
        anchor:'50% 30%'
    },{
        title:'Item 3',
        html:'Content 3',
        width:600,
        anchor:'-100 50%'
    }]
});

[emily]

Originally Posted by dommellenny

i haven't worked it out myself
but it should be easy enough by using anchorlayout

var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize: {width:800, height:600},
    items:[{
        title:'Item 1',
        html:'Content 1',
        width:800,
        anchor:'right 20%'
    },{
        title:'Item 2',
        html:'Content 2',
        width:300,
        anchor:'50% 30%'
    },{
        title:'Item 3',
        html:'Content 3',
        width:600,
        anchor:'-100 50%'
    }]
});

Really? I don't think I understand how you would do this. Please can you provide a bit of context?

[dommellenny]

it should work fine when you give your columntree the layout anchor
and then define for eacht column the anchor like below

anchor : String 
 
This configuation option is to be applied to child items of a container managed by this layout (ie. configured with layout:'anchor').
 
 

This value is what tells the layout how an item should be anchored to the container. items added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported: 
Percentage : Any value between 1 and 100, expressed as a percentage. The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:// two values specified
anchor: '100% 50%' 
// render item complete width of the container and                  
 // 1/2 height of the container// one value specified
anchor: '100%'     
// the width value; the height will default to auto
Offsets : Any positive or negative integer value. This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:
// two values specified
anchor: '-50 -100'
 // render item the complete width of the container                  
 // minus 50 pixels and                   
// the complete height minus 100 pixels.
// one value specified
anchor: '-50'      
// anchor value is assumed to be the right offset value                   
// bottom offset will default to 0
Sides : Valid values are 'right' (or 'r') and 'bottom' (or 'b'). Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.
Mixed : Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use: anchor: '-50 75%'

[emily]

Originally Posted by dommellenny

it should work fine when you give your columntree the layout anchor
and then define for eacht column the anchor like below

anchor : String 
 
This configuation option is to be applied to child items of a container managed by this layout (ie. configured with layout:'anchor').
 
 

This value is what tells the layout how an item should be anchored to the container. items added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported: 
Percentage : Any value between 1 and 100, expressed as a percentage. The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:// two values specified
anchor: '100% 50%' 
// render item complete width of the container and                  
 // 1/2 height of the container// one value specified
anchor: '100%'     
// the width value; the height will default to auto
Offsets : Any positive or negative integer value. This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:
// two values specified
anchor: '-50 -100'
 // render item the complete width of the container                  
 // minus 50 pixels and                   
// the complete height minus 100 pixels.
// one value specified
anchor: '-50'      
// anchor value is assumed to be the right offset value                   
// bottom offset will default to 0
Sides : Valid values are 'right' (or 'r') and 'bottom' (or 'b'). Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.
Mixed : Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use: anchor: '-50 75%'

I will have a play, but I really don't think this will work at all. It is a tree with columns, not a grid.

[dommellenny]

it will work fine because anchor can be applied to every item as long as the component where this item is on has been extended by container,
just give the container

layout :'anchor'

and you will be on your way

[emily]

Originally Posted by dommellenny

it will work fine because anchor can be applied to every item as long as the component where this item is on has been extended by container,
just give the container

layout :'anchor'

and you will be on your way

So what are you suggesting goes in the items of the ColumnTree?

Do you want to give us some example code?