Chart Border

  1. #1

    Chart Border

    I tried to set the border around a chart using:
    border="true" borderspec="2"
    since that didn't work I used:
    StyleSpec="border:5px solid red;"
    There seems to be discussion of this on the api documentation page for Chart:border:
    Sencha Chart:Border comments

    Any thoughts if this is fixed in EXT.JS 4.1
  2. #2
    Hi,

    I see the following AbstractComponent's initStyles sources in ExtJS 4.0.7.

    AbstractComponent's initStyles in ExtJS 4.0.7
    initStyles : function () {
        var style = {},
            me = this,
            Element = Ext.Element;
    
        if (Ext.isString(me.style)) {
            style = Element.parseStyles(me.style);
        } else {
            style = Ext.apply({}, me.style);
        }
    
        // Convert the padding, margin and border properties from a space seperated string
        // into a proper style string
        if (me.padding !== undefined) {
            style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
        }
    
        if (me.margin !== undefined) {
            style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
        }
    
        delete me.style;
        return style;
    }
    As far as I can understand the border property is just missed or not implemented.

    Here is the new initStyles in ExtJS 4.1.0.

    AbstractComponent's initStyles in ExtJS 4.1.0
    initStyles : function (targetEl) {
        var me = this,
            Element = Ext.Element,
            padding = me.padding,
            margin = me.margin,
            x = me.x,
            y = me.y,
            width, height;
    
        if (padding !== undefined) {
            targetEl.setStyle('padding', Element.unitizeBox((padding === true) ? 5 : padding));
        }
    
        if (margin !== undefined) {
            targetEl.setStyle('margin', Element.unitizeBox((margin === true) ? 5 : margin));
        }
    
        if (me.border !== undefined) {
            me.setBorder(me.border, targetEl);
        }
    
        if (me.cls) {
            targetEl.addCls(me.cls);
            delete me.cls;
        }
        if (me.style) {
            targetEl.setStyle(me.style);
            delete me.style;
        }
    
        if (x !== undefined) {
            targetEl.setStyle('left', x + 'px');
        }
        if (y !== undefined) {
            targetEl.setStyle('top', y + 'px');
        }
        if (!me.getFrameInfo()) {
            width = me.width;
            height = me.height;
    
            if (typeof width == 'number') {
                targetEl.setStyle('width', width + 'px');
            }
            if (typeof height == 'number') {
                targetEl.setStyle('height', height + 'px');
            }
        }
    }
    So, it appears to be supported on the AbstractComponent level in ExtJS 4.1.0.

    Though I've just tested it with Chart and it doesn't appear to be working well, and, to be honest, I'm not sure it should or not, it will or not. I just feel it should not, just not documented.

    For now, I would suggest to set up a respective CtCls of a Chart, because I discovered that if StyleSpec with border is set up for a Chart, there is a problem with sizing - a Chart's "rect" HTML element exceeds its container. Not sure what effects it can cause, but I would prefer to avoid it.

    Example
    <style type="text/css">
        .my-chart-container {
            border: 5px solid red;
        }
    </style>
    
    <ext:Chart runat="server" CtCls="my-chart-container">
        ...
    </ext:Chart>
  3. #3
    Thanks, worked perfectly.
    Last edited by cwolcott; Jan 16, 2012 at 10:26 PM.

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  3. Only Right Border in GridPanel
    By walle in forum 1.x Help
    Replies: 6
    Last Post: Nov 10, 2010, 5:23 PM
  4. Border Layout
    By oskarni in forum 1.x Help
    Replies: 7
    Last Post: Apr 10, 2008, 9:19 PM

Tags for this Thread

Posting Permissions