Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
      0  

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

    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?

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

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    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?

  4. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
      0  

    Default

    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.

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Having a container is valid, no reason to always need to use a form field within a form.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Answers
    10
    Vote Rating
    40
      0  

    Default

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

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

  7. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20
    Vote Rating
    18
      0  

    Default

    Quote Originally Posted by squistbe View Post
    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.

  8. #7
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
      0  

    Default

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

  9. #8
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Answers
    10
    Vote Rating
    40
      0  

    Default

    Did you include both classes?

  10. #9
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
      0  

    Default

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

  11. #10
    Sencha User
    Join Date
    May 2007
    Posts
    25
    Vote Rating
    1
      0  

    Default

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

    Code:
    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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •