Question

我想动态创建我的模型字段（在ExtJS 4中）。例如，有时它是0到3，有时它是0到7.这个数据来自JSON文件（和存储）。这是我的模特：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['0','1','2','3','4','5']
});

我尝试了很多方法来手动获取模型并创建字段，但是当涉及网格时，我有空行数据而没有任何错误。例如，网格中有8个空行。

任何帮助将不胜感激

Answer 1

我使用商店加载回调返回的记录动态生成模型。以下是我使用记录动态创建字段的方法。

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

Answer 2

创建一个具有最大字段数的模型（如果您知道15将是从服务器收到的最大值，则从0到15）。

当模型与服务器响应不完全匹配时，ExtJs是非常可原谅的。您仍应创建记录，只有一些字段为null。

Answer 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()
    });
}

Answer 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 - 动态模型字段

4 个答案: