javascript - ExtJS panels freezing sometimes -

javascript - ExtJS panels freezing sometimes -

i have application have extjs grid behind each tab in tabbed pane.

(maybe screenshot help visualise) :

our main application our own custom-written javascript application, , adding extjs components (in case grid components).

every table freezes (however native features scroll panes , textfields don't freeze). happens when have been clicking between tabs. random , there no error message in console, freeze after clicking between tabs 4-5 times, , doing few grid sorts, , perhaps changing column ordering few times. ie. more stuff more freeze, have not ascertained pattern.

initially thought there wrong way configured grid, appears @ panel level (not grid level).

maybe way set grid not correct. code create grid , 'render' div :

/** * onactive method page. when page displayed first called. * * null check needs done first determine whether component 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 div this.tablepanel.render(pavediv); //load info 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 }); homecoming this.packagegrid; },

this kind of lazy loading - ie. if created utilize old reference.

is usage of render correct? is there improve pattern using? performing dolayout() , refesh() after switching tabs right thing here?

i hoping reply 1 of points clear why occasional freezing of screens.

if info isn't changing, shouldn't need refresh grid...

i start adding buffered renderer plugin grid, since there looks there's important number of rows. plugin keeps rendering items dom until needed - decreasing latency.

so, in grid code, add together this:

plugins: ['bufferedrenderer'],

let me know how affects things, if @ all.

javascript extjs extjs4