关于javascript：如何使用loadRecord将嵌套模型加载到Extjs表单中

How to load a nested model into a Extjs form using loadRecord

我已经创建了一个脚本来动态生成表单，但是在加载嵌套模型的数据时遇到了问题。我尝试加载整个记录，并且尝试加载每个子存储，但均无效。

我已经了解了如何使用form.load()，但据我了解，这需要代理连接，并且还需要将json数据存储在\\'data \\'数组中。

有人对我如何解决此问题有任何建议吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

Ext.define('HeaderForm', {
extend: 'Ext.form.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
id: Ext.id(),
defaultType: 'textfield'
});
me.callParent(arguments);
}
});

// Define our data model
Ext.define('HeaderModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'HeaderSequence', type: 'int'}
],
hasMany:[
{ name: 'Columns', model: 'ColumnModel' }
],
proxy: {
type: 'ajax',
actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
url: '@Url.Content("~/Test/Header")',
timeout: 1200000,
},
});

Ext.define('ColumnModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ColumnWidth', type: 'float'}
],
hasMany:[
{ name: 'Fields', model: 'FieldModel'}
],
belongsTo: 'HeaderModel'
});

Ext.define('FieldModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'XType', type: 'string'},
{ name: 'FieldLabel', type: 'string'},
{ name: 'Name', type: 'string'},
{ name: 'Data', type: 'string'},
{ name: 'FieldSpecify', type: 'bool'}
],
belongsTo: 'ColumnModel'
});

var store = Ext.create('Ext.data.Store', {
storeId: 'HeaderStore',
model: 'HeaderModel',
autoDestroy: true,
listeners: {
load: function (result, records, successful, eOpts) {
//console.log(result);
var form = dynamicForm(records[0]);
form.add(submitButton);
form.render('view-@pageSpecificVar');
}
}
});

store.load();

var dynamicForm = function(record) {

var form = new HeaderForm();
var columnContainer = new Ext.widget({
xtype: 'container',
layout: 'column'
});
var formItems = new Ext.util.MixedCollection();

Ext.each(record.ColumnsStore.data.items, function(item) {

Ext.iterate(item.data, function (key, value) {

var fieldContainer = new Ext.widget({
xtype: 'container',
columnWidth: value
});

Ext.each(item.FieldsStore.data.items, function(item) {
if(item.data["FieldSpecify"]) {
fieldContainer.add(new Ext.widget({
xtype: item.data["XType"],
fieldLabel: item.data["FieldLabel"],
name: item.data["Name"],
//value: item.data["Name"]
}));
}
}, this);

columnContainer.add(fieldContainer);

}, this);

}, this);

formItems.add(columnContainer);

form.add(formItems.items);

Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.loadRecord(fields);
});
});

//form.loadRecord(record);

return form;
};

var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
var basic = button.up('form').form;
basic.updateRecord(basic.getRecord());
var store = Ext.StoreMgr.get('HeaderStore');
store.each(function(record) {
record.dirty = true;
});
store.sync();
}
}]
});

更新
抱歉，我可能没有说清楚。我在将商店数据加载到表单字段时遇到问题。对于静态表单，我通常使用loadRecord将嵌套模型加载到表单中，但是在这种情况下，所有字段都嵌套在它们自己的小模型中，那么是否有办法通过loadRecord将每个嵌套模型值加载到它们各自的字段中？

HeaderModel存储字段集信息。

ColumnModel的目的是创建一个容器，该容器将围绕一组字段，以进行样式设置。它仅创建两列字段。

FieldModel存储特定于字段的属性和数据。

这是响应json数据的示例...

1
2
3
4
5
6
7
8
9
10
11
12

{
"HeaderSequence":1,
"Columns":[{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}]
},{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}]
}
]

} ??

谢谢

我已经弄清楚了如何将嵌套模型加载到表单中。我们不能简单地使用load或loadRecord，因为默认情况下该方法尝试获取模型的数据并遍历数据对象并调用setValues。

我要做的是手动获取基本表单元素，然后自己调用setValues来分配值。

1
2
3
4
5
6

// loop through each field store to load the data into the form by field id
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]);
});
});

要对此进行跟进，还需要放置一个自定义的提交处理程序。
哪个会循环遍历存储并设置提交的值以在同步存储之前将其存储。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// define form submit button
var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
// get basic form for button
var basic = button.up('form').form;
// get form submit values
var formSubmitValues = basic.getValues();
// get header store
var store = Ext.StoreMgr.get('HeaderStore');
// loop through each field store and update the data values by id from the form
store.each(function(record) {
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
fields.data['Data'] = formSubmitValues[fields.data['Id']];
});
});
// mark the record as dirty to be sync
record.dirty = true;
});
// sync store object with the database
store.sync();
}
}]
});

看看这个和这个例子，了解如何将嵌套数据加载到嵌套模型中。您还将看到如何访问关联的数据。

我不确定为什么要使用record.ColumnsStore.data.items，就好像记录是HeaderModel类型的一样，您实际上应该通过record.Columns获取列存储，然后迭代该存储。

还将帮助您查看服务器返回的JSON。