2

私はExtJs4.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();                        }
            }
});

誰かが同様の問題を抱えていましたか？私を助けてください。

4

1 に答える 1

1

長い間苦労した後、私はついに実際の問題を見つけました。

ウィンドウにスクロールバーを適用するとどうなるか見てみましょう。ウィンドウ内のコンテンツは、スクロールバーを表示する必要がある本体に入ります。FleXcrollは、targetDivID_mcontentwrapperおよびtargetDivID_scrollbarwrapperの形式のIDを持つターゲットdiv（この場合はbody）内に2つの追加のdivを追加します。本文の内容は_mcontentwrapperに移動し、後でスクロールバーが表示されます。

contentSizeがターゲットdivと同じcontentwrapper-divのサイズより大きい場合、スクロールバーが表示されます。

flexcrollを適用した後のdivの構造は次のとおりです

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

ウィンドウのサイズを変更した後、コンテンツはcontentwrapperではなくwindow-bodyに入ります。したがって、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]);
                            }
}
}

お役に立てば幸いです。

于 2012-09-28T09:40:11.687 に答える