Есть ли способ отобразить линию между метками и столбцами данных в форме Ext JS? - PullRequest
2 голосов
/ 16 марта 2011

Как добавить тонкую серую линию, как показано здесь, между меткой и столбцами полей формы Ext JS?

enter image description here

Я нарисовалстрока выше с графической программой, но сама форма создается с этим кодом:

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.'
        }
    ]
});

1 Ответ

3 голосов
/ 16 марта 2011

Возможно, вы могли бы добавить border-right к label.x-form-item-label, отображаемому элементами формы ExtJS. Но это закончится бесконечной борьбой с CSS, потому что у вас есть плавающие элементы, которые не имеют одинаковую высоту.

На самом деле лучший способ - использовать background-image либо на div.x-form-label-left, который окружает <form>, либо на form.x-form. Не очень хорошо, но единственный способ достичь того, чего мы хотели (и это именно то, что вы просили).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...