Sencha touch 如何在Sencha Touch的数据存储中显示标签中的数据

我想显示从数据存储区接收的数据。我尝试过的一种方法是，将文本字段设置为禁用，然后使用存储数据设置其值。 但我不认为这是正确的解决方案，所以我尝试使用标签，而我不知道如何才能做到这一点。你们能告诉我正确的方法吗。？谢谢你的帮助

谢谢，

---

Mehul Makwana。

我最近试图通过创建一个“标签”表单组件来解决这个问题。我在自己写的一篇博客文章中发表了这篇文章。代码如下：

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);

Ext.form.LabelField=函数（配置）{
Ext.form.LabelField.superclass.constructor.call（this，config）；
};
Ext.extend（Ext.form.LabelField、Ext.form.Field、{
伊斯菲尔德：是的，
值：“”，
渲染选择器：{fieldEl:'.x-form-labelfield'}，
renderTpl：[
'',
“{label}”，
'',
“{value}”，
],
设置值：函数（val）{
this.value=val；
如果（本文件已呈现）{
此.fieldEl.update（“”+val+“”）；
}
归还这个；
},
});
Ext.reg（'labelfield'，Ext.form.labelfield）；

---

让我知道这是否奏效。

谢谢你，先生。这正是我想要的。我重新整理并删除x-form-label类，并使用以下样式：

.x-form-labelfield {
  -webkit-box-flex: 1;
  box-flex: 1;
  width: 100%;
  position: relative;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: .4em;
  border: 0;
  min-height: 2.5em;
  display: block;
  background: white none;
  -webkit-appearance: none;
}

---

这篇文章有点老了，但我是针对同一个主题进行研究的，结果使用了不同的方法

我正在使用Sencha Touch v2.0。我创建了标签，并像通常一样将其放置在form.Panel中。然后，我在designer中配置了标签tpl以包括模型字段。在将这些值应用于formpanel时，我还调用了标签tpl上的apply（）方法。下面的工作示例说明了这一点

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: 'jd@somewhere.com'}");
    // 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);

    }

});

---

因此，我们的想法是将标签模板保存在label.tpl字段中，然后使用template的apply（）方法获取运行时标签值，然后将标签文本设置为该值。

太好了。如果您能再帮我一点忙，我如何将值与存储数据绑定？它应该像一个常规字段，您需要将name属性添加到其中，并使用对象中的数据创建FormPanel。我最终以一种不同的方式使用它，所以你可能需要进行实验。有什么具体的原因改变这种风格吗？