CODEWITHSUNDEEP
cssextjs
Annie W.
Annie W.

Reputation: 438

ExtJS: displayfield with same style as textfield

I'm using xtype displayfield for fields which act as link and displayfield renders html ok. It works fine. I would like to use a same style for displayfield as for textfield (especially because of border).

Could you tell me the simplest way to achieve it? I've tried fieldCls, baseCls etc. with various prefixes but didn't find working solution.

Here my last test, could you tell me what's wrong with it?

Ext.create('Ext.form.Panel', {
    bodyPadding: 10,
    defaultType: 'textfield',
    fieldDefaults: {
        labelAlign: 'right',
        labelWidth: 150
    },
    renderTo: Ext.getBody(),
    standardSubmit: true,
    title: 'Form',
    width: 400,
    items: [
    {
        fieldCls: 'x-form-text',
        fieldLabel: 'Displayfield with link',
        name: 'field01',
        value: 'Some text <a href=http://www.yoururl.com>www.yoururl.com</a>',
        xtype: 'displayfield'
    },{
        fieldLabel: 'Textfield',
        name: 'field02',
        value: 'default',
        xtype: 'textfield' 
    }]
});

Upvotes: 1

Views: 3029

Answers (1)

aviram83
aviram83

Reputation: 900

Ext.create('Ext.form.Panel', {
    bodyPadding: 10,
    defaultType: 'textfield',
    fieldDefaults: {
        labelAlign: 'right',
        labelWidth: 150
    },        
    renderTo: Ext.getBody(),
    standardSubmit: true,
    title: 'Form',
    width: 400,
    items: [
    {
        fieldBodyCls: 'x-form-trigger-wrap-default x-form-text x-form-text-default',
        fieldLabel: 'Displayfield with link',
        name: 'field01',
        value: 'Some text <a href=http://www.yoururl.com>www.yoururl.com</a>',
        xtype: 'displayfield'
    },{
        fieldLabel: 'Textfield',
        name: 'field02',
        value: 'default',
        xtype: 'textfield' 
    }]
});

Upvotes: 3

Related Questions