Dynamic display of legend

[priyapratheep]

I wan to display legend below in my jsp page dynamically

{html: '<br><b>Legend:</b><br><font color="#9A2EFE">Deleted Rows</font><br><font color="#F781F3">Added Rows</font><br><font color="#58D3F7">Updated Cells</font> </br>'}

var staffHoursMainPanel = new Ext.Panel({
    id: 'staffHoursMainPanel',
    frame: true,
    border: true,
    title: '',
    layout:'column',
    defaults: { bodyStyle:'font-size:11px; padding: 2px;' },
    width: 1105,
    items:[{
        items: [prjPanel,staffHourPanel,
                this.addBtn=new Ext.Button({
                    id: 'proBack',
                    xtype:'button',
                    text:'Back',
                    width: 80,
                      handler: function() {
                    document.projectCsApprovalForm.projectid.value = projectId;
                    document.projectCsApprovalForm.procode.value = procode;
                    document.projectCsApprovalForm.loginid.value = login_id;
                    <portlet:namespace />submitprojectCsApprovalForm();
                    }
                }),legendLabel            ],
        columnWidth: 1.0
    }]
});

I want to display above legend at legendLabel place

My condition goes like this

function AllStoresLoaded(){
                        if(projectStore.getCount() >= 0){
                            var recordPrj = projectStore.getAt(0);
                                    if (recordPrj.data.type_name == 'Project'){
                                        legendLabel.setText( HTMLstring);
                                }
                        }

Any other ideas are welcome.. I am not good in CSS....

Thanks

[mitchellsimoens]

The charts are flash so CSS isn't going to control this and will not be able to be outside the flash.