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 上本身。不太好，但这是我们实现所需目标的唯一方法(而这正是您所要求的)。