RowEditing在ExtJs中不起作用

时间:2017-02-25 16:59:01

标签: javascript extjs

我从服务器动态获取列和存储数据,然后调用网格的方法重新配置(store,col)。每列都有自己的uniq数据索引,但RowEditing无法正常工作。

enter image description here enter image description here enter image description here

这样的结果是在改变数据的过程中获得的,数据仅在3列中改变,其余的仍然存在。如果选择任何其他表,通常无法在更新后更改数据,则不清楚它取决于什么。

  

CODE SNIPPET

Ext.define('MVC.view.Main', {
    show: function() {
        var store = Ext.create('Ext.data.Store', {
            fields: ['HeadClue', 'Density', 'errDens', 'MethodD', 'bknumber', '_methodD'],
            autoLoad: false,
            proxy: {
                type: 'ajax',
                method: 'get',
                url: 'rest/table/density',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total'
                },
                paramsAsJson: true
            }
        });

        var col = [];

        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
        });

        var contentPanel = Ext.create('Ext.grid.Panel', {
            title: 'Таблица',
            region: 'center',
            store: store,
            columns: col,
            bbar: Ext.widget('pagingtoolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Данных {0} - {1} of {2}'
            }),
            plugins: [rowEditing],
            tbar: [{
                text: 'Добавить новую запись',
                handler: function() {
                    rowEditing.cancelEdit();

                    var prev = store.data.items[0].data;
                    var newRow = {};
                    for (var property in prev) {
                        if (prev.hasOwnProperty(property)) {
                            newRow[prev[property]] = null;
                        }
                    }

                    store.insert(0, newRow);
                    rowEditing.startEdit(0, 0);
                }
            }, {
                text: 'Обновить данные',
                handler: function() {
                    store.reload();
                }
            }, {
                text: 'Сохранить изменения',
                handler: function() {}
            }, {
                text: 'Удалить запись',
                handler: function() {
                    var sm = contentPanel.getSelectionModel();
                    rowEditing.cancelEdit();
                    store.remove(sm.getSelection());
                    if (store.getCount() > 0) {
                        sm.select(0);
                    }
                }
            }, '->', {
                xtype: 'triggerfield',
                trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
                trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
            }]
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
            id: 'tree-panel',
            title: 'Категории базы данных',
            region: 'north',
            height: '100%',
            minSize: 150,
            rootVisible: false,
            autoScroll: true,
            root: {
                expanded: true,
                children: [{
                    text: "Акустооптические свойства",
                    leaf: true,
                    entity: 'Acop'
                }, {
                    text: "Область гомогенности соединения",
                    leaf: true,
                    entity: 'Sist'
                }, {
                    text: "Теплоемкость",
                    leaf: true,
                    entity: 'Heat'
                }, {
                    text: "Плотность",
                    leaf: true,
                    entity: 'Density'
                }, {
                    text: "Пьезоэлектрические коэффициенты",
                    leaf: true
                }, {
                    text: "Твердость",
                    leaf: true
                }, {
                    text: "Растворимость",
                    leaf: true
                }, {
                    text: "Температура плавления",
                    leaf: true
                }, {
                    text: "Температура Кюри",
                    leaf: true
                }, {
                    text: "Данные по полиморфным модификациям",
                    leaf: true
                }, {
                    text: "Параметры элементарной ячейки",
                    leaf: true
                }, {
                    text: "Тепловое расширение",
                    leaf: true
                }, {
                    text: "Теплопроводность",
                    leaf: true
                }, {
                    text: "Диэлектрическая проницаемость",
                    leaf: true
                }, {
                    text: "Диэлектрические потери",
                    leaf: true
                }, {
                    text: "Коэффициенты электромеханической связи",
                    leaf: true
                }, {
                    text: "Упругие жесткости (податливости)",
                    leaf: true
                }, {
                    text: "Область оптической прозрачности",
                    leaf: true
                }, {
                    text: "Показатели преломления",
                    leaf: true
                }, {
                    text: "Коэффициенты Селмейера",
                    leaf: true
                }, {
                    text: "Электрооптические коэффициенты",
                    leaf: true
                }, {
                    text: "Нелинейно-оптические коэффициенты",
                    leaf: true
                }, {
                    text: "Компоненты тензора Миллера",
                    leaf: true
                }, {
                    text: "Упруго(пьезо)оптические коэффициенты",
                    leaf: true
                }, {
                    text: "Коэффициенты затухания упругих волн",
                    leaf: true
                }, {
                    text: "Подписи к рисункам",
                    leaf: true
                }]
            }
        });

        treePanel.getSelectionModel().on('select', function(selModel, record) {
            if (record.get('leaf')) {
                Ext.Ajax.request({
                    url: 'rest/table/columns',
                    params: {
                        entity: record.get('entity')
                    },
                    method: 'GET',
                    success: function(response) {
                        col = JSON.parse(response.responseText);
                        col.forEach(function(item) {
                            item.editor = {
                                allowBlank: true
                            }
                        });
                        store.proxy.url = 'rest/table/';
                        store.on('load', function(st) {
                            contentPanel.reconfigure(store, col);
                        });
                        store.load({
                            params: {
                                entity: record.get('entity')
                            }
                        });
                    }
                });
            }
        });

        var viewport = Ext.create('Ext.Viewport', {
            layout: 'border',
            title: ' Панель работы с БД',
            style: 'background: #efefe8',
            items: [{
                    xtype: 'box',
                    id: 'header',
                    region: 'north',
                    html: '<h1> Панель работы с БД</h1>',
                    height: 50
                }, {
                    layout: 'border',
                    id: 'layout-browser',
                    region: 'west',
                    border: false,
                    split: true,
                    margins: '2 0 5 5',
                    width: 290,
                    minSize: 100,
                    maxSize: 500,
                    items: [treePanel]
                },
                contentPanel
            ],
            renderTo: Ext.getBody()
        });

        viewport.show();
    }
});
  

传入数据:列

columns

  

存储

enter image description here

0 个答案:

没有答案