When I display a CheckboxGroup in a menu, my long boxLabels get cutoff. I don't know what labels will be passed ahead of time so I can't just specify a static width. How can I keep my boxLabels from being cutoff?
CheckboxGroup cutting off long boxLabels
See the example code below. It's also available as a jsfiddle.
Code:
<html>
<head>
<title>Ext JS Checkbox Group Example</title>
<link rel="stylesheet" type="text/css" href="http://ift.tt/1xzPE7z">
<script type='text/javascript' src="http://ift.tt/1xzPE7C"></script>
<script type='text/javascript' src="http://ift.tt/1rbCe5f"></script>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
Ext.onReady(function(){
var checkboxGroup = new Ext.form.CheckboxGroup({
columns: 2,
items: [
{boxLabel: 'Transaction Date', name: 'cb-horiz-1'},
{boxLabel: 'Item foo', name: 'cb-horiz-2', checked: true},
{boxLabel: 'Transaction Amount', name: 'cb-horiz-3'},
{boxLabel: 'Item bar', name: 'cb-horiz-4'},
{boxLabel: 'Retailer Site Start Date', name: 'cb-horiz-5'}
]
});
var button = new Ext.Button({
text: 'Display...',
menu: new Ext.menu.Menu({
plain: true,
items: [
checkboxGroup
]
})
});
var panel = new Ext.Panel({
title: 'Checkbox Group Example',
frame: true,
renderTo:'viewport',
items: [
button
]
});
});
}//]]>
</script>
</head>
<body>
<div id='viewport'></div>
</body>
</html>
CheckboxGroup cutting off long boxLabels
Aucun commentaire:
Enregistrer un commentaire