如何在 extjs 6 中进行数据绑定答案

【问题标题】：How to do Data binding in extjs 6如何在 extjs 6 中进行数据绑定
【发布时间】：2016-11-08 10:15:07
【问题描述】：

我有这样的json。

     firstName: 'xyz',
     comments : [{
        emailAddress : "abc@gmail.com", body : "PQR",
        emailAddress : "xyz@gmail.com", body : "XYZ",
     }]

我想在可编辑的文本字段中显示名字。并想在网格中显示 cmets。我不明白该怎么做。请帮帮我。

我的观点如下：

    Ext.define("SampleView", {
       extend: "Ext.panel.Panel",
       alias: 'widget.sample',
       id : 'sampleVId',
       requires: ['StudentViewModel'],
       viewModel: { 
            type: 'StudentViewModel' 
       },
       layout: {
            type: 'vbox',
            align: 'stretch'
       },

  initComponent: function() {
    Ext.apply(this, {
        items: [this.form(), this.grid()],           
    });
    this.callParent(arguments);
 },

grid: function(){
    return {
        xtype: 'grid',
        reference: 'samplegrid',
        id : 'samplegridId',
        bind: {
            store: '{comment}'<-- not able to do the binding
        },
        flex:1,
        margin: 10,
        plugins: {
            ptype: 'rowediting',
            clicksToEdit: 2
        },
        columns: [{
            text: 'Email',
            dataIndex: 'email',
            flex: 1,
            editor: {
                allowBlank: false
            }
        }, {
            text: 'Role',
            dataIndex: 'body',
        }],
        }
    }
},


form : function(){
    return{
        xtype : 'form',
        items:[{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            bind: {
                value: '{firstName}'<---- how to bind this valuw to     textfield
            }
        }]
    }
}

});

我的视图模型是这样的：

    Ext.define('StudentViewModel', {
       extend: 'Ext.app.ViewModel',
       alias:'viewmodel.StudentViewModel',
       requires: [
           'Student'
       ],

      stores: {
            orderStore: {
              autoLoad:true,
              type: 'sampleS'
            }
       }
    });

我的模型是这样的：

    Ext.define('Student', {
       extend: 'Ext.data.Model',
       idProperty: 'Id',
       schema: {
           namespace: 'sample',
           proxy: {
              type:'ajax',
              url: 'users.json',
              reader:{
                 type:'json',
                 rootProperty:'data'
             }
         }
     },
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'firstName', type: 'string' },
    ]
});

【问题讨论】：

标签： extjs extjs6-classic

【解决方案1】：

您的绑定必须基于所选的记录。

您的学生模型需要定义为具有对 cmets 模型的 hasMany 引用，以便构建适当的存储以进行绑定，或者您必须根据模型中的数组数据动态创建存储。我建议只使用关系，从长远来看更容易做到。

你有绑定的地方

value: {firstName}

应该是

value: {student.firstName}

在您的视图控制器中，您必须使用看起来像

的行将学生绑定到您尝试在表单中显示的学生模型

vm.setValue('student', YOURMODELOBJECTHERE);

如果学生模型对 cmets 有正确的多关系，那么其余的应该没问题。

【讨论】：