flexcroll not working after Extjs window resize

Question

I am using ExtJs 4.1.0 and I am new to extjs. I have used fleXcroll for applying custom scrollbars to windows and panels. They are working fine so far, but when I am trying to resize the window, the scrollbars are not getting updated and also they are getting hidden from the screen.

Here is the code:

   var samplePanel=new Ext.panel.Panel({
    title:'Panel1',
    height:350,
    width:350
    });

var sampleWindow=new Ext.window.Window({title:'Window',
                               items:[samplePanel],
                renderTo:Ext.getBody(),
                height:300,
                width:300,
                listeners:{
                                afterLayout:function(c){
                                   fleXenv.fleXcrollMain(c.body.id);
                 },resize:function(c,w,h,o){        
                                  if(c.body.dom.fleXcroll)
                                                 fleXenv.updateScrollBars();                        }
            }
});

Does anyone had similar problem? Please help me.

Answer 1

After struggling for long time I finally found the actual problem.

Let us see what is happening when we apply scrollbars to a window. The contents inside window goes into its body where we need to display the scrollbars. FleXcroll will add two additional divs inside the target div(in this case, body) with ids of the form targetDivID_mcontentwrapper and targetDivID_scrollbarwrapper. The contents of the body will go to _mcontentwrapper and scrollbars will be displayed in the later.

Scrollbars will be displayed if the contentSize is greater that size of contentwrapper-div which is same as target div.

Here is the structure of divs after applying flexcroll

 window-body(target div)
   -- mcontentwrapper
      -- contentwrapper
          -- actual content
   -- scrollbarwrapper

After resize the window the content is going into window-body rather than contentwrapper. So the content size in contentwrapper will be zero and hence scrollbar disappears.

structure after resize:

 window-body(target div)
   -- actual content
   -- mcontentwrapper
      -- contentwrapper
   -- scrollbarwrapper

Now we need to put the actual_content into contentwrapper before updating the scrollbars.

Here is the code for doing that:

 listeners:{afterLayout:function(c){    
                   fleXenv.fleXcrollMain(c.body.id);                    
              },
           resize:function(c){if(c.body.dom.fleXcroll){
                             var a=c.body.dom.childNodes;
                             var b=[];
                                for (var i=0,j=0;i<a.length ;i++ )
                                {
                                    if(a[i].id!=c.body.id+"_mcontentwrapper" && a[i].id!=c.body.id+"_scrollwrapper")
                                    {
                                        b[j]=a[i];
                                        j++;
                                    }
                                }
                            var el=Ext.get(c.body.id+"_contentwrapper");
                            for(var i=0;i<b.length;i++)
                                el.appendChild(b[i]);
                            }
}
}                           

I hope it is useful.