我想动态创建我的模型字段（在 ExtJS 4 中）。例如，有时是 0 到 3，有时是 0 到 7。这些数据来自 JSON 文件（和存储）。这是我的模特：
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['0','1','2','3','4','5']
});
我尝试了很多方法来手动获取模型并创建字段，但是当涉及到网格时，我有空行数据而没有任何错误。例如网格中有 8 个空行。
任何帮助将不胜感激
【问题讨论】：
创建一个具有最大字段数的模型（如果您知道 15 将是您将从服务器收到的最大值，则说从 0 到 15）。
当模型与服务器响应不完全匹配时，ExtJs 是可以原谅的。您仍然应该创建记录，只是一些字段将是null。
【讨论】：
我使用商店加载回调返回的记录动态生成我的模型。以下是我使用记录动态创建字段的方法。
roomTypesStore_Loaded: function (records) {
var roomType;
var fields = [
{ name: 'Id', type: 'int' },
{ name: 'Date', type: 'date' }
];
for (var i = 0; i < records.length; i++) {
roomType = records[i].data;
fields[2 + (3 * i) + 0] = { name: roomType.Name + 'Rates', type: 'string' };
fields[2 + (3 * i) + 1] = { name: roomType.Name + 'Selling', type: 'string' };
fields[2 + (3 * i) + 2] = { name: roomType.Name + 'Booked', type: 'string' };
}
var model = {
extend: 'Ext.data.Model',
fields: fields
};
Ext.define('HEB.store.Schedule', model);
var scheduleGrid = this.getScheduleGrid();
var scheduleStore = this.getScheduleStore();
if (scheduleGrid != null && scheduleStore != null) {
scheduleGrid.reconfigure(scheduleStore, columns);
}
},
【讨论】：
如果您只需要设置一次网格，这似乎对我有用。
首先定义一个包含列数据的数组。然后定义网格。假设输入参数columnData是一个包含元数据的数组。
function createGrid(columnData) {
var columns = [{
header: 'Period',
dataIndex: 'period'
}];
for (var i = 0; i < columnData.length; ++i) {
var column = {
header: columnData[i].headerLabel,
dataIndex: columnData[i].fieldName
};
columns[columns.length] = column; //or `columns.push(column);`
}
workGrid = Ext.create('Ext.grid.Panel', {
title: 'Scheduled Driver Work',
store: workStore,
columns: columns,
height: 600,
renderTo: Ext.getBody()
});
}
【讨论】：
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'http://dev.sencha.com/deploy/ext-4.0.1/examples/ux');
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.layout.container.Column'
]);
// This data can be pulled off a back-end database
// Used to generate a model and a data grid
var records = [{
data:{
"dataIndex":"first",
"name":"First Name",
"type":"string"
}
},{
data:{
"dataIndex":"last",
"name":"Last Name",
"type":"String"
}
},{
data:{
"dataIndex":"email",
"name":"Email",
"type":"string"
}
}];
// Lookup table (type => xtype)
var type_lookup = new Object;
type_lookup['int'] = 'numberfield';
type_lookup['float'] = 'numberfield';
type_lookup['string'] = 'textfield';
type_lookup['date'] = 'datefield';
type_lookup['boolean'] = 'checkbox';
// Skeleton store
var store_template = {
autoLoad: true,
autoSync: true,
remoteFilter: false,
// DATA is inserted here for the example to work on local drive (use proxy below)
data:[{id:1,first:"Fred",last:"Flintstone",email:"fred@flintstone.com"},
{id:2,first:"Wilma",last:"Flintstone",email:"wilma@flintstone.com"},
{id:3,first:"Pebbles",last:"Flintstone",email:"pebbles@flintstone.com"},
{id:4,first:"Barney",last:"Rubble",email:"barney@rubble.com"},
{id:5,first:"Betty",last:"Rubble",email:"betty@rubble.com"},
{id:6,first:"BamBam",last:"Rubble",email:"bambam@rubble.com"}],
proxy: {
type: 'rest',
url: 'http://dev.sencha.com/deploy/ext-4.0.1/examples/restful/app.php/users',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
}
};
// Skeleton grid (_PLUGINS_ & _STORE_, are placeholders)
var grid_template = {
columnWidth: 1,
plugins: '_PLUGINS_',
height: 300,
store: '_STORE_'
}
// Skeleton window (_ITEMS_ is a placeholder)
var window_template = {
title: 'Dynamic Model / Window',
height: 400,
width: 750,
layout: 'fit',
items: '_ITEMS_'
}
// Generate a model dynamically, provide fields
function modelFactory(name,fields){
model = {
extend: 'Ext.data.Model',
fields: fields
};
eval("Ext.define('"+name+"',"+Ext.encode(model)+");");
}
// Generate a dynamic store
function storeFactory(name,template,model){
template.model = model;
eval(name+" = Ext.create('Ext.data.Store',"+Ext.encode(template)+");");
}
// Generate a dynamic grid, .. store name is appended as a string because otherwise, Ext.encode
// will cause 'too much recursion' error (same for plugins)
function gridFactory(name,template,store,plugins){
script = name+" = Ext.create('Ext.grid.Panel', "+Ext.encode(template)+");";
script = script.replace("\"_STORE_\"", store);
script = script.replace("\"_PLUGINS_\"", plugins);
eval(script);
}
// Generate a dynamic window, .. items are appended as a string to avoid Ext.encode error
function windowFactory(winName,winTemp,items){
script += winName+" = Ext.create('Ext.window.Window',"+Ext.encode(winTemp)+").show();";
script = script.replace("\"_ITEMS_\"", items);
eval(script);
}
// Generate a model, a store a grid and a window dynamically from a record list!
function generateDynamicModel(records){
fields = [{
name: 'id',
type: 'int',
useNull:true
}];
columns = [{
text: 'ID',
sortable: true,
dataIndex: 'id'
}];
for (var i = 0; i < records.length; i++) {
fields[i+1] = {
name: records[i].data.dataIndex,
type: records[i].data.type
};
columns[i+1] = {
text: records[i].data.name,
sortable: true,
dataIndex: records[i].data.dataIndex,
field: {
xtype: type_lookup[records[i].data.type]
}
};
}
grid_template.columns = columns;
modelFactory('myModel',fields);
storeFactory('myStore',store_template,'myModel');
gridFactory('myGrid',grid_template,'myStore','[rowEditing]');
windowFactory('myWindow',window_template,'[myGrid]');
// Direct access to the store created above
myStore.load();
}
Ext.onReady(function(){
rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
generateDynamicModel(records);
});
请看http://www.sencha.com/forum/showthread.php?136362-Extjs-4-Dynamic-Model
【讨论】：