Сетка собственности в ExtJs - PullRequest
0 голосов
/ 23 октября 2018

У меня есть какой-то магазин, в котором формируются данные.На панели это выглядит как «fieldName» и текстовое поле (в зависимости от вызванной формы).Например, на одной форме отображается «имя документа» и поле, на другой - дата продажи и поле даты.Данные формируются динамически

Вот хранилище:

tableTempStore = new Ext.data.JsonStore({
    url: objectUrlAddress,
    baseParams: {
        'objectID': objectID
    },
    root: 'Fields',
    fields: [{
        name: 'Type',
        type: 'int'
    }, {
        name: 'Value'
    }, {
        name: 'IsRequired',
        type: 'bool'
    }, {
        name: 'Identifier'
    }, {
        name: 'Data'
    }],
    listeners: {
        load: function(obj, records) {
            Ext.each(records, function(rec) {

                var item = null;
                switch (rec.get('Type')) {
                    case 0: // int
                        item = new Ext.form.NumberField();
                        item.id = rec.get('Identifier');
                        item.fieldLabel = rec.get('Hint');
                        var isRequired = rec.get('IsRequired');
                        item.anchor = '100%';
                        item.allowBlank = ! isRequired;
                        item.disabled = editDisabled;
                        item.value = rec.get('Data');
                        break;
                    case 1: // demical
                        item = new Ext.form.NumberField();
                        item.id = rec.get('Identifier');
                        item.fieldLabel = rec.get('Hint');
                        var isRequired = rec.get('IsRequired');
                        item.anchor = '100%';
                        item.allowBlank = ! isRequired;
                        item.allowDecimals = true;
                        item.disabled = editDisabled;
                        item.value = rec.get('Data');
                        break;
                    case 2: // text
                        item = new Ext.form.TextField();
                        item.id = rec.get('Identifier');
                        item.fieldLabel = rec.get('Hint');
                        item.anchor = '100%';
                        var isRequired = rec.get('IsRequired');
                        item.allowBlank = ! isRequired;
                        item.value = rec.get('Data');
                        if (item.id == 'DocumentName') {
                            if (optype == "create") {
                                item.disabled = false;
                            } else {
                                item.disabled = true;
                            }
                        } else {
                            item.disabled = editDisabled;
                        }
                        break;
                    case 3: // date
                        var isRequired = rec.get('IsRequired');
                        item = new Ext.form.DateField();
                        item.id = rec.get('Identifier');
                        item.format = 'd.m.y H:i';
                        item.allowBlank = ! isRequired;
                        item.value = rec.get('Data');
                        item.emptyText = 'дд.мм.гггг чч:мм';
                        item.fieldLabel = rec.get('Hint');
                        item.disabled = editDisabled;
                        item.anchor = '100%';
                        break;
                    case 4: // enum
                        var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
                        var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
                        item = new Ext.form.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            forceSelection:true,
                            editable: false,
                            hiddenName: rec.get('Identifier'),
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                fields: [
                                    {name: 'myId', type: 'string'},
                                    {name: 'displayText'}
                                ],
                                data: dataArray
                            }),
                            valueField: 'myId',
                            displayField: 'displayText',
                            disabled: editDisabled

                        });

                        item.id = '_' + rec.get('Identifier');
                        item.anchor = '100%';
                        item.fieldLabel = rec.get('Hint');
                        var isRequired = rec.get('IsRequired');
                        item.allowBlank = ! isRequired;
                        item.value = rec.get('Data');
                        break;
                    case 5: // SQL
                        var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
                        var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
                        item = new Ext.form.ComboBox({
                            typeAhead: true,
                            width: '100%',
                            triggerAction: 'all',
                            forceSelection:true,
                            editable: false,
                            hiddenName: rec.get('Identifier'),
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                fields: [
                                    {name: 'myId', type: 'string'},
                                    {name: 'displayText'}
                                ],
                                data: dataArray
                            }),
                            valueField: 'myId',
                            displayField: 'displayText',
                            disabled: editDisabled
                        });
                        item.id = '_' + rec.get('Identifier');
                        item.anchor = '100%';
                        item.fieldLabel = rec.get('Hint');
                        var isRequired = rec.get('IsRequired');
                        item.allowBlank = ! isRequired;
                        item.value = rec.get('Data');
                        break;
                        }
                if (item != null) {
                    grid.add(item);
                    tableValue = Ext.getCmp('propGrid').doLayout();
                    source[item.fieldLabel] = tableValue;
                    //grid.doLayout();
                }
            });
            grid.setSource(source);
        }
    }
});

Этот код работал с формой, но мне нужно использовать Property Grid.Я знаю, как отображается имя поля («имя документа» и т. Д.), Но я не понимаю, как отображается текстовое поле и т. Д. Для формы я использовал doLayout.Как я могу это сделать?

Я попробовал использовать customEditors, но он не работает с магазином!

Вот таблица:

grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    id: 'propGrid',
    autoFill: true,
    autoHeight: true,
    width: 600
});

Пожалуйста, помогите мне!

ОБНОВЛЕНИЕ

Вот обновление магазина:

someStore = new Ext.data.JsonStore({
        storeId: 'myStore',
        url: objectUrlAddress,
        baseParams: {
            'objectID' : objectID
        },
        root: 'Fields',
        fields: [
            {name: 'Hint'},
            {name:'Type', type: 'int'},
            {name: 'Value'},
            {name: 'Index', type: 'int'},
            {name: 'IsRequired', type:'bool'},
            {name: 'Identifier'},
            {name: 'EnumList'},
            {name: 'Directory'},
            {name: 'Data'}
        ]});

Вот обновление сетки:

var mainGrid = new Ext.grid.EditorGridPanel({
        id: 'tableId',
        height:300,
        width: '100%',
        clicksToEdit:1,
        frame: true,
        store: someStore,
        columns: 
        [
        {header: 'Объект'},
        {header: 'Значение', dataIndex: 'Value', editor: {xtype: 'textfield'},
        getEditor: function(record) {
                   var xtype = null,
                    args = {
                    fieldLabel: record.get('Hint'),
                    allowBlank: !record.get('IsRequired'),
                    value: record.get('Data'),
                    disabled: false
                };
                switch (record.get('Type')) {
                    case 0: // int
                        xtype = 'Ext.form.field.Number';
                        args.allowDecimals = false;
                    break;
                    case 1: // decimal
                        xtype = 'Ext.form.field.Number';
                        args.allowDecimals = true;
                    break;
                    case 2: // text
                        xtype = 'Ext.form.field.Text';
                    break;
                    case 3: // date
                        xtype = 'Ext.form.field.Date';
                        args.emptyText = 'дд.мм.гггг чч:мм';
                        args.format = 'd.m.y H:i';
                    break;
                    case 4: // enum
                    case 5: // sql
                        var dataValues = Ext.util.JSON.decode(record.get('EnumList'));
                        var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });

                        xtype = 'Ext.form.field.ComboBox ';
                        args.store = new Ext.data.ArrayStore({
                            fields: [
                                {name: 'myId', type: 'string'},
                                {name: 'displayText'}
                            ],
                            data: dataArray
                        });
                    break;
                }

                return new Ext.grid.CellEditor({
                    field: Ext.create(xtype, args)
                });
              }
            }
        ]
        });

Но таблица пуста, что я делаю не так?!

1 Ответ

0 голосов
/ 24 октября 2018

См. Частично реализованное решение в этой скрипке

Ext.create('Ext.data.Store', {
    storeId: 'myStore',
    fields:[ 'Type', 'Value', 'IsRequired', 'Identifier', 'Data'],
    data: [
        {
            "Type": 0,
            "IsRequired": false,
            "Identifier": "id-1",
            "Data": 1001
        },
        {
            "Type": 0,
            "IsRequired": true,
            "Identifier": "id-2",
            "Data": 2002
        },
        {
            "Type": 1,
            "IsRequired": true,
            "Identifier": "id-3",
            "Data": 0.71
        },
        {
            "Type": 3,
            "IsRequired": true,
            "Identifier": "id-4",
            "Data": "24.10.18 00:00"
        }
    ]
});

Ext.create({
    title: 'Properties Grid',
    xtype: 'grid',
    renderTo: Ext.getBody(),
    height: 400,
    width: 600,
    plugins: ['cellediting'],
    store: Ext.data.StoreManager.lookup('myStore'),
    selModel: 'cellmodel',
    columns: [
        { text: 'Identifier', dataIndex: 'Identifier' },
        {
            text: 'Data',
            dataIndex: 'Data',
            editor: {
                xtype: 'textfield' // will default to this
            },
            getEditor: function(record) {
                var xtype = null,
                    args = {
                    fieldLabel: record.get('Hint'),
                    allowBlank: !record.get('IsRequired'),
                    value: record.get('Data'),
                    disabled: false
                };

                console.log({
                    type: record.get('Type')
                });

                switch (record.get('Type')) {
                    case 0: // int
                        xtype = 'Ext.form.field.Number';
                        args.allowDecimals = false;
                    break;
                    case 1: // decimal
                        xtype = 'Ext.form.field.Number';
                        args.allowDecimals = true;
                    break;
                    case 2: // text
                        xtype = 'Ext.form.field.Text';
                    break;
                    case 3: // date
                        xtype = 'Ext.form.field.Date';
                        args.emptyText = 'дд.мм.гггг чч:мм';
                        args.format = 'd.m.y H:i';
                    break;
                    case 4: // enum
                    case 5: // sql
                        var dataValues = Ext.util.JSON.decode(record.get('EnumList'));
                        var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });

                        xtype = 'Ext.form.field.ComboBox ';
                        args.store = new Ext.data.ArrayStore({
                            fields: [
                                {name: 'myId', type: 'string'},
                                {name: 'displayText'}
                            ],
                            data: dataArray
                        });
                    break;
                }

                if (!xtype) {
                    return false;
                }

                return Ext.create('Ext.grid.CellEditor', {
                    field: Ext.create(xtype, args)
                });
            }
        }
    ]
});

PS: Не совсем ясно, чего вы пытаетесь достичь, подумайте о том, чтобы подробнее рассказать оиспользуйте случай в вашем описании.

...