Внешние файлы 3.2. Корреляция Grid View-Store

В моем примере порядок записи данных в сетку следующий:

  1. Добавьте необходимое количество пустых записей
  2. Изменить значение в нужных ячейках

Это нужно для того, чтобы передавать только изменения с сервера либо всю таблицу. В некоторых случаях изменений может не быть, или некоторые данные могут быть даже удалены. Но основная идея в том, что данные должны меняться в два этапа. Проблема в том, что перезапись данных может происходить в разное время при отрисовке вызова. В некоторых случаях у нас будут ошибки.

//error
store.insert(0, new Rec());   
win.show();         
store.insert(0, new Rec());

//no error
store.insert(0, new Rec());     
store.insert(0, new Rec());  
win.show();         

//no error
win.show();         
store.insert(0, new Rec());   
store.insert(0, new Rec());

Мы не можем гарантировать порядок выполнения функций вставки и показа, так как они могут вызываться из разных асинхронных запросов.

Мой вопрос в следующем; Почему изменения в магазине зависят от состояния просмотра и как мы можем защитить себя от этого?

тестовый пример


javascript view store model-view-controller extjs
person TheHorse    schedule 19.04.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Или вы можете обновить GridView после показа

win.show();
grid.getView().refresh();
person S-e-r-g-y    schedule 20.04.2012

arrow_upward
1
arrow_downward

Похоже, что прослушиватель GridView для события "добавить" магазина не добавляется в представление до тех пор, пока не будет вызван метод init() GridView (это вызывается из Grid onRender()). Это происходит при рендеринге сетки (win.show()). Вы не получали ошибку № 2 (insert-insert-show), потому что она никогда не сталкивалась с Ext.fly(rows[0]).addClass(this.firstRowCls); в GridView processRows().

Я немного изменил код, чтобы распечатать некоторые журналы в инициализации GridViews и onAdd (обработчик события добавления магазина):

Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel({
        columns: [{
                dataIndex: 'common',
                editor: new Ext.form.TextField({allowBlank: false})
            }]
    });

    var store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            record: 'plant',
            fields: [{name: 'common', type: 'string'}]
        })
    });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        region: "center",
        view: new Ext.grid.GridView({
            init : function(grid) {
                console.log("\tinit()");
                this.grid = grid;

                this.initTemplates();
                this.initData(grid.store, grid.colModel);
                this.initUI(grid);
            },
            onAdd : function(store, records, index) {
                console.log("\t\tadding: ", records[0].id);
                this.insertRows(store, index, index + (records.length-1));
            }
        })
    });

    var win = new Ext.Window({
        layout: "border",
        items: [grid],
        width : 300,
        height : 300
    });

    var Rec = grid.getStore().recordType;
  /*   
    console.log("show-insert-insert");
    win.show();

    console.log("\t1st insert");
    store.insert(0, new Rec());

    console.log("\t2nd insert");
    store.insert(0, new Rec());     
   */
    console.log("insert-insert-show");
    console.log("\t1st insert");
    store.insert(0, new Rec());

    console.log("\t2nd insert");
    store.insert(0, new Rec());

    console.log("win.show()");
    win.show();
});

Вот консоль из трех разных случаев:

show-insert-insert
    init()
    1st insert
        adding: ext-record-1
    2nd insert
        adding: ext-record-2
    win.show()

insert-show-insert
    1st insert
    win.show()
    init()
    2nd insert
        adding: ext-record-2

Ext.fly(rows[0]) is null
[Break On This Error]   
Ext.fly(rows[0]).addClass(this.firstRowCls);
ext-all-debug.js (line 43959

insert-insert-show
    1st insert
    2nd insert
    win.show()
    init()

Как видите, единственный случай, когда он фактически добавляет оба элемента в Grid (и GridView), — это случай show-insert-insert. Лучшее решение, которое я нашел до сих пор, это просто сделать

win.show();
win.hide();

с начала. Лучшего решения я пока не нашел. Надеюсь, это поможет.

person therat    schedule 19.04.2012