CODEWITHSUNDEEP
extjsbordertextfieldextjs5
user3891193
user3891193

Reputation: 63

In ExtJS 5: How to remove border of textfield

In ExtJS 5, I wanna remove border of textfield and make it like this: enter image description here

Of course it can be done by two labels, but it's not very clean. I tried following two ways on ExtJS5 official website, but it doesn't work: 

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
}]

});

Results: enter image description here

Anybody who have any idea? Thanks.

Upvotes: 1

Views: 7852

Answers (2)

plr108
plr108

Reputation: 1205

If you absolutely need to use the textfield xtype, you can remove the border by clearing the inputWrapCls config. Some Ext JS themes add a border to the div wrapping the input element (and any trigger buttons), so you may have to clear the triggerWrapCls config as well.

You will likely also want to modify the fieldStyle config to remove the input element's background:

{
    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'
}

Upvotes: 5

Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

Try with displayfiled in place of textfiled for reference go through the link. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html

Upvotes: 3

Related Questions