Question

我是extjs的新手。我正在设计一个弹出窗口，它基本上从服务器填充一些数据。我使用的布局为'fit'，我使用标签显示数据。这是我的代码

win = new Ext.window.Window({
    title: 'Data point details',
    layout: 'fit',
    width: 'auto',
    height: 500,
    modal: false,
    closeAction: 'destroy',
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 2,
        rows :10 ,
        tdAttrs:
            {
                style:
                {
                    margin: '160px',
                    valign: 'top' ,
                    padding: '8px' ,
                    'font-size' : '12px'
                }
            }


    },
    defaults: {
                    bodyPadding: 10 ,

                    },
    items: [
            {
            xtype: 'label',
            text: 'Element : ' ,

            style:
                {

                    'font-weight':'bold',
                    'labelAlign' : 'right',

                }
            },
            {
            xtype: 'label',
            text: elementname 
            },



            {
            xtype: 'label',
            text: 'Expression: ' ,
            style:
                {

                    'font-weight':'bold',

                }
            },
            {
            xtype: 'label',
            text: s.expressionName 
            },
            {
            xtype: 'label',
            text: 'Profile: ' ,
            style:
                {

                    'font-weight':'bold',

                }
            },
            {
            xtype: 'label',
            text: s.profileName 
            },


            {
            xtype: 'label',
            text: 'Time:',
            style:
                {

                    'font-weight':'bold',

                }
            },
            {
            xtype: 'label',
            text: Highcharts.dateFormat('%a, %b %e, %Y, %I:%M %p  ', this.x)
            },

            {
            xtype: 'label',
            text: 'Value:',
            style:
                {

                    'font-weight':'bold',

                }
            },
            {
            xtype: 'label',
            text: yvalue ,
            },

            {
                xtype: 'box',
                style : {
                padding: '0px',
                height: '90px',
                //background : 'white',
                },
                html: new Ext.XTemplate("<div style=\"height:150px;\">{value}")
                      .apply({value: me.htmldiv.innerHTML })
            },
                                                         ]
    });
                                                win.show();

我希望左侧显示的列的文本在右侧，但是文本总是朝向左侧显示所有单元格。例如，出现带有“Element”文本的标签在左边。我使用了labelalign但它不起作用。坚持提出建议

Answer 1

在我找到解决方案之前，只有一些建议：

你到处都有昏迷的昏迷。一些旧的浏览器会在这样的事情上失败。例如：

{'font-weight'：'bold'，＆lt;＆lt; - here}

win = new Ext.window.Window（... - 这是全局变量声明 - 可能是你在JavaScript中可以做的最糟糕的事情和地狱的方式。使用 var 关键字来声明局部变量，如下所示： var win = new Ext.window.Window（...
labelAlign是将标签文本与右对齐的方式但是a）您通过 style 属性（Ext应用于组件创建的HTML元素的样式）和b）labelAlign属性可标记的组件和它听起来一样奇怪，Label本身不是Labelable。只是不要像这样使用Label，见下文......
在Window

布局

当您在寻求帮助并将代码作为问题的一部分发布时，编辑代码以使其不包含外部依赖关系 - 可以立即复制和运行。我花了近半个小时让你的样品正常工作

正如我之前所说，你正在使用Lable组件，而不是假设使用它。标签不是直接创建的，而是通过在实现Labelable mixin的组件上指定标签属性（大多数情况下为Fields）。听起来可能很复杂，但不是，请看一下代码：

 var wnd = new Ext.window.Window({
        title: 'Data point details',
        width: 400,
        height: 200,
        modal: false,
        closeAction: 'destroy',
        layout: {
           type: 'anchor',
            align: 'stretch'
        },
        bodyPadding: 10,
        defaults: {                
            labelAlign: 'right',                
            labelStyle: {
                'font-weight': 'bold'
            },
            labelWidth: 100
        },
        items: [{
            xtype: 'displayfield',
            fieldLabel: 'Element',                
            value: 'elementname'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Expression',
            value: 's.expressionName' // s.expressionName
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Profile',
            value: 's.profileName'      // s.profileName
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Time',
            value: 'time'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Value',
            value: 'yvalue'     // yvalue
        }]
    });

    wnd.show();

您可以尝试使用它here。我最后的建议是看看官方的ExtJS文档和指南，这些文档和指南非常好 - here例如是制作表格的样本......

Answer 2

这是一种使用内联css样式的方法，而不是单独的类。如果从javascript常量中获取css值，这可能很有用：

this.myLabel = Ext.create('Ext.form.Label', {
  text: 'My Label Name',
  style: {
    'text-align': this.defaults.myLabelAlign, // The javascript constant.
    'font-size': this.defaults.myLabelStyle // The javascript constant.
  }
});

对齐extjs标签上的文本

2 个答案: