Question

我正在使用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();                        }
            }
});

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

Answer 1

经过长时间的挣扎，我终于找到了实际的问题。

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

如果contentSize大于contentwrapper-div的大小（与目标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]);
                            }
}
}

我希望它很有用。

Extjs窗口调整大小后flexcroll无法正常工作

1 个答案: