Menu
Team,
I am facing one problem where I am not able to align lable on top of the textare 'Menu List' in below example.
I tried giving AlignLabel = top in text area but it is not working.
Also I want to put one search button after the text area which will open another form and there I will be selecting available menu items but have no clue how to do it.
code.
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var tab2 = new Ext.FormPanel({
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
title: 'Run Report',
bodyStyle:'padding:5px',
border : true,
style: 'margin:0 auto;margin-top:50px;margin-left:50',
width: 900,
height:600,
items:
[{
xtype:'panel',
border:true,
height:150,
title:'Inner Panel',
bodyStyle:'padding:5px; overflow-x: hidden; overflow-y: auto;',
autoScroll:true,
items: [{
layout:'column',
border :false,
items:[{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}]
},
{
xtype:'panel',
border:true,
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
height:500,
title:'Inner Panel',
bodyStyle:'padding:5px;',
autoScroll:false,
layout:'form',
items:[
{
xtype: 'label',
fieldLabel: 'Radio Formats',
labelStyle: 'width:400px;'
},
{
xtype: 'radiogroup',
fieldLabel: '',
columns: 3,
width:200,
hideLabel:true,
items: [
{boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-col', inputValue: 2},
{boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
]
},
{
xtype: 'textarea',
style:{overflow:'auto'},
width:250,
labelAlign: 'top',
labelStyle: 'font-weight:bold;width:120px',
height:35,
labelSeparator:"",
fieldLabel: "Menu List <span style=\"color:red;\">*</span>"
}
]
}]
,
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
</script>
</div>
</body>
</html>
324
In ExtJs 4.2 the label align can be adjusted to top with labelAlign:
{
xtype: 'textarea',
fieldLabel: 'My Label',
labelAlign:'top'
}
answered Oct 04 '22 15:10
You can use style parameter for Ext.form.Label to override its css:
Ext.onReady(function(){
var newLabel = new Ext.form.Label(
{
style: 'text-align:right; display:block;',
text: 'test',
renderTo: document.body
}
);
});
Found example on Sencha forums.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
