javascript - 有没有办法在 Ext JS 表单中的标签和数据列之间显示一条线？

Question

如何在 Ext JS 表单的标签列和字段列之间添加一条细灰色线(如此处所示)？

我用图形程序绘制了上面的线，但表单本身是用以下代码创建的:

var form_customer_contact = new Ext.FormPanel({
    frame:true,
    labelWidth: 140,
    labelAlign: 'left',
    bodyStyle:'padding:10px',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    items: [{
            fieldLabel: 'Customer Contact',
            name: 'customerContact',
            allowBlank:false,
            value: 'Mr. Smith'
        },
        createCombo('Reason for Contact', 'reason', ['data correction', 'new contact', 'missing information']),
        createCombo('Result', 'result', ['new data', 'old data', 'other data']),
        createCombo('Communication', 'communication', ['telephone', 'fax', 'e-mail']),
        createCombo('Related Order', 'relatedOrder', ['345234534','3453453452', '2234234234'])
        , {
            fieldLabel: 'Date',
            xtype: 'datefield',
            name: 'theDate',
            format: 'd.m.Y',
            width: 150,
            id: 'theDate',
            vtype: 'daterange'
        }, {
            fieldLabel: 'Time',
            xtype: 'timefield',
            name: 'theTime',
            format: 'h:i:s',
            width: 150,
            id: 'theTime'
        },{
            fieldLabel: 'Notes',
            name: 'relatedOrder',
            value: 'These are the notes and they are very long and these are more notes and they are very long and these are more notes and they are very long and these are more notes and they are very long and these are more.'
        }
    ]
});

Answer 1

您也许可以添加 border-right到label.x-form-item-label由 ExtJS 表单元素呈现。但这会导致与 CSS 的无休止的斗争，因为 float 元素的高度不同。

实际上最好的方法是使用 background-image要么在 div.x-form-label-left围绕<form>或上form.x-form本身。不太好，但这是我们实现我们想要的目标的唯一方法(这正是您所要求的)。