ExtJS: удалите сетку из tabpanel, когда его базовое хранилище пуст

Question

У меня есть TabPanel, который содержит, помимо прочего, сетку, подключенную к Магазину.

Некоторые события могут удалять элементы из магазина.

Я хотел бы, чтобы Grid удалялась из TabPanel, когда хранилище пуста и, возможно, имеет одно место в моем коде, чтобы проверить это событие.

Я думал об использовании прослушивателей магазинов, но, к сожалению, это вызывает исключения из кода Ext. Мое предположение заключается в том, что это происходит, потому что рендеринг выполняется по сетке после удаления из вкладки.

Любая идея о том, как выполнить такую ​​задачу без испорчения Ext, очень ценится. Спасибо :)

Кстати, это фрагмент кода:

var myStore = new Ext.data.Store({ 
reader: new Ext.data.JsonReader({fields: MyRecord}), 
listeners:{ 
    'clear': function(store, recs) { 
    myTabPanel.remove(myGrid); 
    }, 
    'remove': function(store, rec, idx) { 
    if (store.getCount() == 0) { 
    myTabPanel.remove(myGrid); 
    } 
    } 
} 
}); 

var myGrid = new Ext.grid.GridPanel({ 
id: "myGrid", 
title: "A Grid", 
store: myStore, 
frame:false, 
border:false, 
columns: [ 
{ 
    header: 'Remove', 
    align:'center', 
    width: 45, 
    sortable: false, 
    renderer: function(value, metaData, record, rowIndex, colIndex, store) { 
    return '<img src="images/remove.png" width="34" height="18"/>'; 
    } 
},{ 
    header: 'Some Data', 
    dataIndex: 'data', 
    sortable: true 
} 
], 
listeners:{ 
    'cellclick':function(grid, rowIndex, colIndex, e){ 
    var rec = myStore.getAt(rowIndex); 
    if(colIndex == 0){ 
    myStore.remove(rec); 
    } 
    } 
} 
}); 

var myTabPanel= new Ext.TabPanel({ 
activeTab: 0, 
items: [ fooPanel, barPanel, myGrid] 
}); 

Answer 1

Проблема решена: мне просто пришлось удалить сетку, установив параметр «autoDestroy» в значение «false». Фиксированный код ниже.

var myStore = new Ext.data.Store({ 
reader: new Ext.data.JsonReader({fields: MyRecord}), 
listeners:{ 
    'clear': function(store, recs) { 
    myTabPanel.remove(myGrid, false); 
    }, 
    'remove': function(store, rec, idx) { 
    if (store.getCount() == 0) { 
    myTabPanel.remove(myGrid, false); 
    } 
    } 
} 
}); 

var myGrid = new Ext.grid.GridPanel({ 
id: "myGrid", 
title: "A Grid", 
store: myStore, 
frame:false, 
border:false, 
columns: [ 
{ 
    header: 'Remove', 
    align:'center', 
    width: 45, 
    sortable: false, 
    renderer: function(value, metaData, record, rowIndex, colIndex, store) { 
    return '<img src="images/remove.png" width="34" height="18"/>'; 
    } 
},{ 
    header: 'Some Data', 
    dataIndex: 'data', 
    sortable: true 
} 
], 
listeners:{ 
    'cellclick':function(grid, rowIndex, colIndex, e){ 
    var rec = myStore.getAt(rowIndex); 
    if(colIndex == 0){ 
    myStore.remove(rec); 
    } 
    } 
} 
}); 

var myTabPanel= new Ext.TabPanel({ 
activeTab: 0, 
items: [ fooPanel, barPanel, myGrid] 
}); 

Answer 2

Любая причина, по которой вы физическое удаление сетки из вкладки? Похоже, что парадигма нечетного интерфейса - почему бы просто не сохранить пустую сетку с «пустым» сообщением?

Во всяком случае, я думаю, что ваш подход (использование событий магазина и количество записей, чтобы определить, когда его удалить) в основном в порядке. Возможно, вам захочется выяснить, как решить любые ошибки, о которых вы говорите. Кем они были?