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