1

垂直スクロール バーと水平スクロール バーのない Extjs グリッドを作成しようとしています。これは、グリッドが両方向に無限に拡大する必要があることを意味します。

ここに私のコードがあります:

Ext.require([
             'Ext.grid.*',
             'Ext.data.*',
             'Ext.util.*',
             'Ext.state.*'
         ]);

         Ext.onReady(function() {
             Ext.QuickTips.init();

             // setup the state provider, all state information will be saved to a cookie
             //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

             var cols = 50;
             var colsData = [];

             var fields = [];
             for(var i=1;i<cols;i++){
                 colsData.push(
                         {
                             text     : 'COLUMN - ' + i,
                             //flex     : 1,
                             width    : 120,
                             sortable : true,
                             dataIndex: 'COL'+i
                         });

                 fields.push(
                    {name: 'COL'+i,      type: 'int'}
                 );
             }

             var myData = [];
             //create data
             for(var i=1;i<500; i++){
                 var subData = [];
                 for(var j=1;j<cols; j++){
                     subData.push(Math.floor((Math.random()*10000)+1));
                 }

                 myData.push(subData);
             }


             function change(val) {
                 return val;
             }

             // create the data store
             var store = Ext.create('Ext.data.ArrayStore', {
                 fields: fields,
                 data: myData
             });

             // create the Grid
             var grid = Ext.create('Ext.grid.Panel', {
                 store: store,
                 stateful: true,
                 //stateId: 'stateGrid',
                 autoHeight: true,
                 autoWidth: true,
                 autoScroll: false,
                 //containerScroll: false,
                 columns: colsData,
                 //height: 100,
                 //width: 600,
                 title: 'Array Grid',
                 renderTo: 'grid-example',
                 viewConfig: {
                     //stripeRows: false,
                    //forceFit: false
                 }
             });
         });

グリッドを div 要素にレンダリングしているので、実際にはレイアウトなどは使用しません。

<div id="grid-example" class="myDiv"></div>

およびスタイル:

<style type="text/css">
    body{
        overflow: visible;
    }

    .myDiv{
        display: block;
        /*float: left;*/
        overflow: visible;
    }
</style>

これは私のブラウザのスクリーン ショットで、垂直スクロール バーが表示されています [予想どおり]。

問題は

水平スクロール バーがなく、列の一部がページから切り取られているだけで、表示されているデータを表示する方法がありません。 ここに画像の説明を入力

extjs がグリッドの高さと幅を計算しようとしていることがわかります。高さの場合は正しいですが、幅の場合は正しくありません。計算された幅は、グリッド内の列の合計ではなく、ブラウザーの幅に等しくなります。 ここに画像の説明を入力

あなたの側からの提案や言葉に感謝します。誰でも私を助けることができますか？

4

2 に答える 2

1

などに多数のリスナーを登録することでこの問題を解決しましたviewConfig.viewready。grid.columnresizeそのため、グリッドをレンダリングするか、列のサイズ変更/可視性を変更するたびに、列の合計幅を計算します。その結果、グリッドを計算されたサイズに拡張します。何かのようなもの：

             var grid = Ext.create('Ext.grid.Panel', {
                 store: store,
                 stateful: true,
                 autoHeight: true,
                 columns: colsData,
                 title: 'Array Grid',
                 renderTo: 'grid-example',
                 viewConfig: {
                     listeners: {
                         viewready:function(){
                             var totalWidth = 0;
                             Ext.each(grid.columns, function(column, index) {
                                    if (column.isHidden() == false)
                                       totalWidth += column.width;
                                });

                             //console.log("Width: " + totalWidth);
                             grid.setWidth(totalWidth);
                         } 
                     }
                 }
                 ,listeners: {
                     columnresize: function(){
                         grid.viewConfig.listeners.viewready();
                     },
                     columnhide: function(){
                         grid.viewConfig.listeners.viewready();
                     },
                     columnshow: function(){
                         grid.viewConfig.listeners.viewready();
                     }
                 }
             });
         });
于 2013-09-04T15:29:03.590 に答える
0

おそらくあなたは autoScroll を探していますか？質問からどのような動作が必要かわかりません。

グリッドにスクロールバーを付けるか、div にスクロールバーを付けるか、ブラウザにスクロールバーを付けるかという問題が残ります。

div は HTML のブロック レベル要素です。あなたの例では、ブラウザの幅を自動的に埋めます。ExtJS はその div をグリッドで埋め、グリッドをブラウザのウィンドウと同じ大きさにします。グリッドにスクロールバーを許可しないため、余分な列は切り取られます。

グリッドにスクロールバーを表示する場合は、autoScrollset を true に設定します。

代わりに div をスクロールする場合は、.myDivoverflow: autoの代わりに設定します。visibleグリッド自体にも幅を指定し、列の幅と同じ幅にする必要があります。

ExtJS でスクロールバーを処理できるようにすることをお勧めします。ExtJS でスクロールバーを処理できるようにすると、より効率的なレンダリングを使用できるようになります (実際に表示されている列と行のみをレンダリングします)。

于 2013-08-30T20:18:09.703 に答える