PDA

View Full Version : Expand width of panel dynamically?



Vinni
7 May 2011, 7:41 AM
Hi all,

I am working on project, where I have to display string in one line ONLY.
String is dynamic, and passed in the function. I have background image in panel, which need to be expanded with the text.

And final panel returns --> background image + Label (on top of it)

Requirement - Depending on text, panel width should increase (with image in background).
Problem - How to expand the panel width dynamically? so that label fits in and not wrap? And image does not cuts.

Here is my piece of code, I wrote.
I know, its not the best way to do it.

So any help or direction would be great.
Vinni

php tags for better reading.

showMandatoryField("Passwords Don't Match");

function showMandatoryField(msg){

lblmandatoryMessage = new Ext.form.Label({
html: '<div id="mandatorymsg">' + msg + '</div>',
id: 'lblmandatoryMessage',
style: {"margin-left": "11px", "margin-top": "8px", 'font-family':'Arial', 'font-size':'11px'}
});

//Now I have find the string msg length in pixels.. but below code dont work as label is not created.
/*
var tm = Ext.util.TextMetrics.createInstance(Ext.getDom("mandatorymsg"));
var msglength = tm.getWidth(text);

var test = document.getElementById("lblmandatoryMessage");
var msglength = test.offsetWidth;
*/
msglength = msg.length; // THIS is wrong.. i need width in pixels.

var warningImage = new Ext.BoxComponent({autoEl: {tag: 'img', src: '/leftwarning.gif'}, height: 30, width: msglength + 50});

panelImage = new Ext.Panel({
border: false,
header: false,
height: 30, width: msglength + 50,
bodyStyle: "background:none;",
style: {"margin-left": "0px", "margin-top": "0px"},
items: [warningImage]
});

var mandatoryPanel = new Ext.Panel({
id:'mandatoryPanel',
border: false,
x :100,y:100,
height: 35, width:msglength + 60,
layout: 'absolute',
items: [panelImage, lblMessage]
});
return mandatoryPanel;
}