Search code examples
javascriptextjsextjs3

How to set Background color of Panel to transperent


I've set my panel config to: bodyStyle: 'background:transparent;' but it's not working. I've also tried: defaults: { bodyStyle: 'background:transparent;' }.

function cre1ColumnHboxForModErrMsg(itemA){
    var hb = new Ext.Panel(
        {   layout:'fit'
            ,height:75
            ,frame: false
            ,border: false
            ,bodyStyle: 'background:transparent;'
            ,layoutConfig:{ align:'top', pack:'center' }
            ,defaults:{ layout:'form', labelWidth:CampConst.CampModErrMsgLabelWidth ,width:175,border:false}
            ,items:[
                {   width:((CampConst.CampModErrMsgWidth/2)-30)
                    ,defaults:{ labelSeparator:'', msgTarget:'side', selectOnFocus:true,anchor:'95%' }
                    ,items:[
                        itemA
                    ]
                }
            ]
        }
    );
    return hb;
}

Where am I going wrong?

Screen shot


Solution

  • Try style: 'background:transparent;' - this applies to the overall panel element rather than just the body.

    However that being said it looks like you don't really need a panel , and could replace with a container:

    function cre1ColumnHboxForModErrMsg(itemA){
    
        var hb = new Ext.Panel(
            {   layout:'fit'
                ,height:75
                ,frame: false
                ,border: false
                ,bodyStyle: 'background:transparent;'
                ,layoutConfig:{ align:'top', pack:'center' }
                ,defaults:{ layout:'form', labelWidth:CampConst.CampModErrMsgLabelWidth ,width:175,border:false}
                ,items:[
                    {   width:((CampConst.CampModErrMsgWidth/2)-30)
                        ,defaults:{ labelSeparator:'', msgTarget:'side', selectOnFocus:true,anchor:'95%' }
                        ,items:[
                            itemA
                        ]
                    }
                ]
            }
        );
        return hb;
    }