I have an application where we have an extJS grid behind each tab in a tabbed pane.
(Maybe a screenshot will help to visualise) :
Our main application is our own custom-written javascript application, and we are just adding some extJS components (in this case the grid components).
Every so often the table freezes (however native features like scroll panes and textfields don't freeze). This only happens when we have been clicking between tabs. It is very random and there is no error message in the console, but I usually get the freeze after clicking between the tabs about 4-5 times, and doing a few grid sorts, and perhaps changing the column ordering a few times. ie. the more stuff I do the more likely I will get this freeze, however I have not ascertained a pattern.
Initially i thought there was something wrong with the way that I configured the grid, but it appears to be at the panel level (not the grid level).
Maybe the way I set my grid up is not correct. This is the code where I create my grid and 'render' it to a DIV :
/**
* onActive method for a Page. When the page is displayed this is first called.
*
* A null check needs to be done first to determine whether the component is created.
*
*/
onActive : function () {
var pageDivs = Ext.select('div .Page');
var paveDIV = pageDivs.elements[0];
if (!this.tablePanel) {
Util.logInfo("creating new table panel")
//create component
this.tablePanel = this.createTablePanel();
//add it to the DIV
this.tablePanel.render(paveDIV);
//load data
this.loadPackageAllData();
}
this.tablePanel.doLayout();
this.tablePanel.getView().refresh();
},
createTablePanel : function () {
var _self = this;
this.packageGrid = Ext.create('js.grid.PackageGrid', {
width: '979px',
height: '400px',
layout: 'fit',
margin: '5px',
flex: 1,
listeners: {
itemdblclick : function(selModel, record, index, options){
_self.showDetailView(record.data.id);
}
},
aditionalToolbarItems: _self.aditionalToolbarItems
});
return this.packageGrid;
},
This is kind of lazy loading - ie. if its already created then just use the old reference.
- is my usage of render correct?
- is there a better pattern I could be using?
- performing a doLayout() and refesh() after switching tabs would be the right thing to do here?
I am hoping that the answer to one of my points will clear up why I get occasional freezing of my screens.
