В ExtJS 5: как удалить границу текстового поля

В ExtJS 5 я хочу удалить границу текстового поля и сделать так: введите здесь описание изображения

Можно конечно двумя метками сделать, но это не очень чисто. Я пробовал два способа на официальном сайте ExtJS5, но это не работает:

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    // here 1
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    border: 0,    // set border = 0 or false
    hideBorders: true
}, {
    // here 2
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Email Address',
    style: 'border: none;background-image:none;'   // set style border none
}]

});

Результаты: введите здесь описание изображения

Кто-нибудь, у кого есть идеи? Спасибо.


textfield border extjs extjs5
person user3891193    schedule 30.12.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуйте с displayfiled вместо textfiled для справки перейти по ссылке. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html

person Surya Prakash Tumma    schedule 30.12.2014
comment
Спасибо Пракаш! Раньше я не знал этого поля отображения. - person user3891193; 30.12.2014
comment
Привет, Пракаш, еще одна вещь, как выделить метку полужирным шрифтом, я попытался добавить labelStyle: 'font-weight:bold;' , но не работает. Ты знаешь это? - person user3891193; 30.12.2014
comment
попробуйте выделить метку жирным шрифтом, например ‹b›Имя‹/b› - person Surya Prakash Tumma; 30.12.2014

arrow_upward
5
arrow_downward

Если вам абсолютно необходимо использовать текстовое поле xtype, вы можете удалить границу, очистив inputWrapCls config. Некоторые темы Ext JS добавляют границу к div, обертывающему элемент ввода (и любые триггерные кнопки), поэтому вам, возможно, придется очистить triggerWrapCls.

Вероятно, вы также захотите изменить fieldStyle для удаления фона элемента ввода:

{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    // remove default styling for element wrapping the input element
    inputWrapCls: '',
    // remove default styling for div wrapping the input element and trigger button(s)
    triggerWrapCls: '',
    // remove the input element's background
    fieldStyle: 'background:none'
}
person plr108    schedule 14.06.2016