ExtJS 4 - Поля динамической модели - PullRequest
Новая
       51

ExtJS 4 - Поля динамической модели

3 голосов
/ 23 марта 2012

Я хочу динамически создавать поля моей модели (в ExtJS 4).Например, иногда это от 0 до 3, а иногда от 0 до 7. Эти данные поступают из файла JSON (и хранилища).Это моя модель: 

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

Я пробовал много способов получить модель вручную и создать поля, но когда дело доходит до сетки, у меня есть пустые строки данных без каких-либо ошибок.Например, 8 пустых строк в сетке.

Буду признателен за любую помощь

Ответы [ 4 ]

6 голосов
/ 08 апреля 2012

I генерирует мою модель динамически с использованием записей , возвращаемых загрузкой магазина callback Вот как я создаю поля динамически, используя записи. 

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);
    }
},
0 голосов
/ 17 апреля 2013 
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

0 голосов
/ 11 августа 2012

Если вам нужно настроить сетку только один раз, мне кажется, это работает.

Сначала определите массив с данными столбца. Затем определите сетку. Предположим, что входной параметр 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()
    });
}
0 голосов
/ 25 марта 2012

Создайте модель с максимальным количеством полей (скажем, от 0 до 15, если вы знаете, что 15 будет максимумом, который вы получите от сервера).

ExtJs очень прост, когда модель не точно соответствует отклику сервера. Вы все еще должны создать записи, только некоторые поля будут null.

...