Как отобразить данные в Label из хранилища данных в Sencha Touch

#sencha-touch #labelfield #extjs-mvc

Вопрос:

Я хочу отобразить данные, которые я получаю из хранилища данных. Один из способов, который я пробовал, — взять текстовое поле, отключить его, а затем установить его значение с данными хранилища. Но я не думаю, что это правильное решение, поэтому я пытаюсь использовать label вместо этого, и я не понимаю, как это можно сделать. Можете ли вы, ребята, указать мне правильный способ сделать это.? Приветствуется любая помощь.

Спасибо, Мехул Маквана.

Ответ №1:

Этот пост немного устарел, но я исследовал ту же тему и в итоге использовал другой подход.

Я использую Sencha Touch версии v2.0. Я создаю ярлык и размещаю его внутри формы.Панель, как обычно делается. Затем я настроил tpl label в designer для включения полей модели. При применении значений к formpanel я также вызываю метод apply() для tpl метки. Следующий рабочий пример иллюстрирует это.

app.js:

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

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

  launch: function() {

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

});

Вид.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 в поле label.tpl, затем получить значение runtime label с помощью метода apply() шаблона, затем задать для него текст label.

Ответ №2:

Недавно я попытался решить эту проблему, создав компонент формы «label». Я опубликовал об этом в статье блога, которую я написал на 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);

Дайте мне знать, если это поможет.

1. отлично. Если вы можете мне немного больше помочь, как я могу связать значение с данными хранилища. ?

2. Оно должно действовать как обычное поле, вам нужно будет добавить к нему свойство name и создать FormPanel с данными из объекта. В итоге я использовал его по-другому, так что вам, возможно, придется поэкспериментировать.

Ответ №3:

Спасибо, mistagrooves. Это было именно то, что я искал. Я рекомендую удалить класс 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;
}