How to display data in Label from data store in Sencha Touch

Question

I want to display data that i receive from a data store. One way that i have tried, is to take a text field make it disabled and then set its value with store data. But i don't think it is the correct solution so i am trying to use label instead and I am not getting how it can be done. Can you guys can point me to correct way of doing it.? Any help appreciated .

Thanks, Mehul Makwana.

Solution 1

I recently tried to solve this problem by creating a 'label' form component. I posted about it in a blog article I wrote on Sencha/PhoneGap. Here is the code:

Ext.form.LabelField = function(config){
    Ext.form.LabelField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.LabelField, Ext.form.Field,  {
    isField: true,
    value: '',
    renderSelectors: {fieldEl: '.x-form-labelfield'},
    renderTpl: [
       '<tpl if="label">',
           '<div class="x-form-label"><span>{label}</span></div>',
       '</tpl>',
       '<div class="x-form-label x-form-labelfield" style="width:70%; text-align:right"><span>{value}</span></div>',
    ],
    setValue:function(val) {
        this.value = val;
        if(this.rendered){
             this.fieldEl.update('<span>' + val + '</span>');
        }
        return this;
    },

});

Ext.reg('labelfield', Ext.form.LabelField);

Let me know if this does the trick.

Solution 2

This post is a little old but I was research the for same topic and ended up using a different approach.

I'm using Sencha Touch v2.0. I create the label and place it inside the form.Panel as one would normally do. I then configured the label tpl in designer to include the model fields. When applying the values to the formpanel, I also invoke the apply() method on the label tpl. The following working sample illustrate it.

app.js:

Ext.Loader.setConfig({
  enabled: true
});

Ext.application({
  views: [
    'MyFormPanel'
  ],
  name: 'MyApp',

  launch: function() {

    Ext.create('MyApp.view.MyFormPanel', {fullscreen: true});
  } 

});

view.MyFormPanel.js

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myformpanel',

    config: {
    items: [
        {
        xtype: 'label',
        itemId: 'myLabel',
        tpl: [
            'Hello, {firstName} {lastName}, please change your email below:',
            ''
        ]
        },
        {
        xtype: 'textfield',
        label: 'Email:'
        }
    ],
    listeners: [
        {
        fn: 'onFormpanelInitialize',
        event: 'initialize'
        }
    ]
    },

    onFormpanelInitialize: function(component, options) {
    var person = Ext.decode("{firstName: 'John',lastName: 'Dow',email: '[email protected]'}");
    // apply value to the form
    this.setValues(person);
    // get the updated text for the label
    var label = this.down('#myLabel');
    var html = label.getTpl().apply(person);
    label.setHtml(html);

    }

});

So the idea is save the label template in the label.tpl field, then get the runtime label value using apply() method of Template, then set the label text to it.

Comments

[mehul9595]

great. If you can help me bit more, how can i bind value with Store data. ?

[mistagrooves]

It should act like a regular field, you will need to add the name property to it and create the FormPanel with the data from the object. I ended up using it in a different manner, so you may need to experiment.

[mehul9595]

is there any specific reason for changing the style. ?