5

团队，

我面临一个问题，我无法在下面的示例中的 textare '菜单列表' 顶部对齐标签。

我尝试在文本区域中给出 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>
4

2 回答 2

8

在ExtJs 4.2中，标签对齐可以调整top为labelAlign：

            {
                xtype: 'textarea',
                fieldLabel: 'My Label',
                labelAlign:'top'
            }
于 2014-02-21T18:32:51.700 回答
1

您可以使用 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 论坛上找到示例。

于 2014-02-06T03:41:14.427 回答