ExtJS 4 - 动态模型字段
Posted
技术标签:
【中文标题】ExtJS 4 - 动态模型字段【英文标题】：ExtJS 4 - Dynamic Model Fields 【发布时间】：2012-04-07 21:48:21 【问题描述】：我想动态创建我的模型字段（在 ExtJS 4 中）。例如，有时是 0 到 3，有时是 0 到 7。这些数据来自 JSON 文件（和存储）。这是我的模特：
Ext.define('MyApp.model.User',
extend: 'Ext.data.Model',
fields: ['0','1','2','3','4','5']
);
我尝试了很多方法来手动获取模型并创建字段，但是当涉及到网格时，我有空行数据而没有任何错误。例如网格中有 8 个空行。
任何帮助将不胜感激
【问题讨论】：
还有哪些字段来自服务器？为什么它们每次都不同？ 谢谢你。 JSON 文件包含数据数组，这些是数组索引。它们每次都不同，因为它是用户定义的。 Here's 一个遵循 ExtJS 4.1 的 MVC 模式的示例 【参考方案1】：创建一个具有最大字段数的模型（如果您知道 15 将是您将从服务器收到的最大值，则说从 0 到 15）。
当模型与服务器响应不完全匹配时，ExtJs 是可以原谅的。您仍然应该创建记录，只是一些字段将是null。
【讨论】：
【参考方案2】：我使用商店加载回调返回的记录动态生成我的模型。以下是我使用记录动态创建字段的方法。
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);
,
【讨论】：
【参考方案3】：如果您只需要设置一次网格，这似乎对我有用。
首先定义一个包含列数据的数组。然后定义网格。假设输入参数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()
);
【讨论】：
【参考方案4】：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
【讨论】：
以上是关于ExtJS 4 - 动态模型字段的主要内容，如果未能解决你的问题，请参考以下文章