如何在Sencha Touch中的數據存儲中顯示標籤中的數據

Question

我想顯示從數據存儲接收的數據。我嘗試過的一種方法是將文本字段設置爲禁用狀態，然後使用存儲數據設置其值。 但我不認爲這是正確的解決方案，所以我試圖使用標籤，而不是如何做到這一點。你們能否指出我正確的做法？任何幫助讚賞。

謝謝， Mehul Makwana。

Answer 1

我最近試圖通過創建一個'標籤'表單組件來解決這個問題。我在關於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); 

讓我知道這是否有竅門。

Answer 2

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

Answer 3

這個職位是有點老了，但我是研究了同一主題，並最終使用了不同的方法。

我正在使用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: '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領域的標籤模板，然後使用申請獲得運行標籤值（）方法，然後將標籤文本設置爲它。