Extjs窗口调整大小后flexcroll不起作用答案

【问题标题】：flexcroll not working after Extjs window resizeExtjs窗口调整大小后flexcroll不起作用
【发布时间】：2012-09-24 10:20:31
【问题描述】：

我正在使用 ExtJs 4.1.0，我是 extjs 的新手。我使用 fleXcroll 将自定义滚动条应用于窗口和面板。到目前为止它们工作正常，但是当我尝试调整窗口大小时，滚动条没有得到更新，而且它们也从屏幕上隐藏了。

代码如下：

   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();                        }
            }
});

有没有人遇到过类似的问题？请帮帮我。

【问题讨论】：

标签： extjs custom-scrolling

【解决方案1】：

苦苦挣扎了半天，终于找到了真正的问题。

让我们看看当我们将滚动条应用到窗口时会发生什么。窗口内的内容进入我们需要显示滚动条的主体。 FleXcroll 将在目标 div（在本例中为 body）内添加两个额外的 div，其 id 格式为 targetDivID_mcontentwrapper 和 targetDivID_scrollbarwrapper。 body的内容会到_mcontentwrapper，滚动条会在后面显示。

如果 contentSize 大于与目标 div 相同的 contentwrapper-div 的大小，则会显示滚动条。

这是应用flexcroll后div的结构

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

调整窗口大小后，内容将进入 window-body 而不是 contentwrapper。因此 contentwrapper 中的内容大小将为零，因此滚动条消失了。

调整大小后的结构：

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

现在我们需要在更新滚动条之前将 actual_content 放入 contentwrapper。

这是执行此操作的代码：

 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]);
                            }
}
}

希望有用。

【讨论】：