Why doesn't Sencha Touch 2 have an xtype displayfield?

[squistbe]

If you look in Ext documentation there is an xtype displayfield, but not in Sencha Touch. Is there is a replacement for displayfield in Sencha Touch2?

[jerome76]

There are other things that are in Ext JS but not in Sencha Touch. Couldn't you just use a container or dataview to do the same thing?

[squistbe]

I am inside a form panel and all my form fields are wrapped in a fieldset. I was hoping to use a form field. I believe the displayfield in Ext is just text in a div. I would like to do something similar.

[mitchellsimoens]

Having a container is valid, no reason to always need to use a form field within a form.

[estesbubba]

Easy to write your own. Add a little CSS and you're done.

Ext.define('My.view.DisplayField', {
    
    extend: 'Ext.field.Field',
    xtype: 'displayField',
    
    config: {
        displayText: null,
        component: {
            xtype: 'displayFieldComponent'
        }
    },
    


    initialize: function() {
        var me = this,
            comp = me.getComponent();
        
        me.callParent();
    },
    
    updateDisplayText: function(value) {
        var me = this,
            comp = me.getComponent();
            
        comp.displayElement.setHtml(value);
    }
    
});


Ext.define('My.view.DisplayFieldComponent', {
    
    extend: 'Ext.Component',
    xtype: 'displayFieldComponent',
    
    config: {
        cls: 'x-field-input'
    },
    
    getTemplate: function() {
        return [{
            reference: 'displayElement',
            tag: 'div'
        }]
    }
    
});


Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Enter your name',
            items: [
                {
                    xtype: 'textfield',
                    label: 'First Name',
                    name: 'firstName'
                },
                {
                    xtype: 'textfield',
                    label: 'Last Name',
                    name: 'lastName'
                },
                {
                    xtype: 'displayField',
                    label: 'Display Only',
                    displayText: 'Can\'t touch this'
                }
            ]
        }
    ]
});

[James Goddard]

If you look in Ext documentation there is an xtype displayfield, but not in Sencha Touch. Is there is a replacement for displayfield in Sencha Touch2?

Sencha Touch contains a very small subset of Ext.

[squistbe]

I tried writing my own, but I get the Cannot create an instance of unrecognized alias: widget.displayFieldComponent ​error.

[estesbubba]

Did you include both classes?

[squistbe]

I included 'MyApp.view.DisplayField'. What other class are you referring to?

[gigel]

Thanks "estesbubba" for your code. Here's my slightly improved version:

Ext.define('My.view.DisplayField', {
	extend: 'Ext.field.Field', xtype: 'displayField',
	config: {component: {xtype: 'displayFieldComponent'}},
	setValue: function(value) {this.getComponent().displayElement.setHtml(value);return this;}
});
Ext.define('My.view.DisplayFieldComponent', {
	extend: 'Ext.Component', xtype: 'displayFieldComponent', config: {cls: 'x-field-input'},
	getTemplate: function() {return [{reference: 'displayElement', tag: 'div', style: 'padding:10px'}]}
});

The main change is "setValue", for allowing the field to behave like just another field when loading data into the form.