Grid ExtJS4-动态模型字段

我想动态地创建模型字段（在ExtJS4中）。例如，有时是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

I使用存储加载回调返回的记录动态生成我的模型。下面是我如何使用记录动态创建字段

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);
    }
},

roomTypesStore\u加载：函数（记录）{
室型；
变量字段=[
{name:'Id'，type:'int'}，
{name:'Date'，键入：'Date'}
];
对于（var i=0；i

如果您只需要设置一次网格，这似乎对我有效

首先使用列数据定义数组。然后定义网格。假设输入参数

columnData

是一个包含元数据的数组

函数createGrid（columnData）{
变量列=[{
标题：“期间”，
数据索引：“期间”
}];
对于（变量i=0；i

Ext.Loader.setConfig({
已启用：true
});
Ext.Loader.setPath（'Ext.ux'，'http://dev.sencha.com/deploy/ext-4.0.1/examples/ux');
外部要求([
“Ext.form.*”，
“Ext.data.*”，
“Ext.grid.*”，
“Ext.ux.grid.FiltersFeature”，
“Ext.layout.container.Column”
]);
//这些数据可以从后端数据库中提取
//用于生成模型和数据网格
var记录=[{
数据：{
“数据索引”：“第一”，
“姓名”：“名字”，
“类型”：“字符串”
}
},{
数据：{
“数据索引”：“最后一次”，
“姓名”：“姓氏”，
“类型”：“字符串”
}
},{
数据：{
“数据索引”：“电子邮件”，
“名称”：“电子邮件”，
“类型”：“字符串”
}
}];
//查找表（type=>xtype）
var type_lookup=新对象；
键入查找['int']='numberfield'；
键入查找['float']='numberfield'；
键入_lookup['string']='textfield'；
键入_lookup['date']='datefield'；
键入_lookup['boolean']='checkbox'；
//骷髅店
变量存储\u模板={
自动加载：对，
自动同步：对，
remoteFilter:false，
//此处插入的数据用于在本地驱动器上工作的示例（使用下面的代理）
数据：[{id:1，第一个：“Fred”，最后一个：“Flintstone”，电子邮件：fred@flintstone.com"},
{id:2，第一个：“威尔玛”，最后一个：“弗林斯通”，电子邮件：wilma@flintstone.com"},
{id:3，第一个：“鹅卵石”，最后一个：“燧石”，电子邮件：pebbles@flintstone.com"},
{id:4，第一个：“巴尼”，最后一个：“瓦砾”，电子邮件：barney@rubble.com"},
{id:5，第一个：“贝蒂”，最后一个：“瓦砾”，电子邮件：betty@rubble.com"},
{id:6，第一个：“BamBam”，最后一个：“碎石”，电子邮件：bambam@rubble.com"}],
代理：{
键入：“rest”，
网址：'http://dev.sencha.com/deploy/ext-4.0.1/examples/restful/app.php/users',
读者：{
键入：“json”，
root:“数据”
},
作者：{
键入：“json”
}
}
};
//骨架网格（插件和存储是占位符）
变量网格_模板={
列宽：1，
插件：''u插件''，
身高：300，
商店：''u商店'
}
//骨架窗口（_ITEMS_u是占位符）
变量窗口\u模板={
标题：“动态模型/窗口”，
身高：400，
宽度：750，
布局：“适合”，
项目：“\u项目”
}
//动态生成模型，提供字段
函数模型工厂（名称、字段）{
型号={
扩展：“Ext.data.Model”，
字段：字段
};
eval（“Ext.define”（“+name+”，“+Ext.encode（model）+”）；”；
}
//生成动态存储
函数storeFactory（名称、模板、型号）{
template.model=模型；
eval（name+“=Ext.create（'Ext.data.Store'，“+Ext.encode（template）+”）；”；
}
//生成一个动态网格。。存储名称作为字符串追加，因为否则，Ext.encode
//将导致“太多递归”错误（插件也是如此）
函数gridFactory（名称、模板、存储、插件）{
script=name+“=Ext.create（'Ext.grid.Panel'，“+Ext.encode（模板）+”）；”；
script=script.replace（“\\\\\”，STORE）；
script=script.replace（“\\\\\\”，插件）；
评估（脚本）；
}
//生成一个动态窗口。。项目作为字符串追加，以避免Ext.encode错误
函数windowFactory（winName、winTemp、items）{
script+=winName+“=Ext.create（'Ext.window.window'，“+Ext.encode（winTemp）+”）.show（）；”；
script=script.replace（“\”\u ITEMS\u\”，ITEMS）；
评估（脚本）；
}
//生成模型、存储、网格和
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);
});