如何在文本区域顶部对齐标签

Question

队员们，

我正面临着一个问题，在下面的例子中，我不能将标签对齐在文本‘菜单列表’的顶部。

我尝试在文本区中设置AlignLabel = top，但它不起作用。

此外，我想把一个搜索按钮后的文本区，这将打开另一个表单，在那里我将选择可用菜单项，但没有线索如何做。

代码。

<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>

Answer 1

在ExtJs4.2中，可以使用labelAlign将标签align调整为top

            {
                xtype: 'textarea',
                fieldLabel: 'My Label',
                labelAlign:'top'
            }

Answer 2

你可以使用Ext.form.Label的样式参数来覆盖它的css：

Ext.onReady(function(){
  var newLabel = new Ext.form.Label(
      {
        style: 'text-align:right; display:block;',
        text: 'test',
        renderTo: document.body
      }
  );
});

在Sencha forums上找到示例。