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

问题描述：

我想显示从数据存储接收的数据。我尝试过的一种方法是将文本字段设置为禁用状态，然后使用存储数据设置其值。但我不认为这是正确的解决方案，所以我试图使用标签，而不是如何做到这一点。你们能否指出我正确的做法？任何帮助赞赏。如何在Sencha Touch中的数据存储中显示标签中的数据

谢谢， Mehul Makwana。

答

我最近试图通过创建一个'标签'表单组件来解决这个问题。我在关于Sencha/PhoneGap的博客文章中发布了这篇文章。这里是代码：

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

让我知道这是否有窍门。

很好。如果你可以帮助我多一点，我怎样才能与商店数据绑定价值。？ – mehul9595 2011-05-30 07:28:56

它应该像一个普通的字段，你需要添加名称属性，并用该对象的数据创建FormPanel。我最终以不同的方式使用它，所以你可能需要尝试。 – mistagrooves 2011-05-30 14:57:01

答

谢谢mistagrooves。那正是我所期待的。我reccomand删除X型标签类和使用这些样式：

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

是否有任何改变风格的具体原因。？ – mehul9595 2011-11-30 05:40:56

答

这个职位是有点老了，但我是研究了同一主题，并最终使用了不同的方法。

我正在使用Sencha Touch v2.0。我创建标签并将其放在form.Panel中，正如通常所做的那样。然后，我在设计器中配置标签tpl以包含模型字段。在将值应用于窗体面板时，我还会在标签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: '[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); 

    } 

});

这样的想法是保存在label.tpl领域的标签模板，然后使用申请获得运行标签值（）方法，然后将标签文本设置为它。

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

相关推荐