extjsツリーパネルのスクロールバーが機能しない

Question

ツリーパネルのスクロールバーがもう機能しないことがあります。スクロールバーを移動することはまだ可能ですが、ツリーはもう移動しません。それはFirefoxとChromeでも同様です。ここで

は私のツリーパネルの源である：

 

var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '../tree.pl' } });
 

var tree = Ext.create('Ext.tree.Panel', { store: treeStore, renderTo: 'tree', title: 'Tree', width: 400, height: 450, rootVisible:false, dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [ { xtype: 'tbspacer', width: 340 }, { text: 'Search', handler: function(){ names = []; Ext.Array.each(tree.getView().getChecked(), function(rec){ names.push(rec.get('text')); });
 

     resultStore.load({ 
         params:{ 
          search_type: 'tree', 
          tree_nodes: names.join('II'), 
         } 
        }); 
       } 
    } 
    ] 
}] 
 

}）;
 

Answer 1

私は同じ問題を抱えていました。彼らはカスタムスクロールバーを使用し、それはかなりバグです（特にchromeで）。カスタムスクロールを削除するには、設定に以下を追加してください：

var tree = Ext.create('Ext.tree.Panel', { 
    scroll   : false, 
    viewConfig  : { 
    style   : { overflow: 'auto', overflowX: 'hidden' } 
    }, 
    // ... 
}); 

私はtreepanelを試していません。しかし、グリッドパネルは完全に機能しました（ツリーとグリッドの両方がExt.Panel.Tableの拡張であるため、ソリューションはtreepanelでも機能するはずです）。

Answer 2

カスタムスクロールは、Ext 4.1で再びネイティブスクロールに置き換えられます。仮想化されたスクロールバーは、無制限のスクロール、列のロックなどをサポートすることを意図していましたが、私はそれらを解決してネイティブのスクロールバーを保持しています。私は4.0.xの現在の問題がこれで解決されたら驚くでしょう。

Answer 3

メインライブラリのリソースにあるext-all.cssファイル内にあるEXT 4.0では、これが機能しない本当の理由です。

.x-grid-cell { 
    overflow: hidden; 
    font: normal 13px tahoma, arial, verdana, sans-serif; 
    user-select: none; 
    -o-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: -moz-none; 
    -webkit-user-select: none; 
    cursor: default 
} 

.x-grid-cell-inner { 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    padding: 3px 6px; 
    white-space: nowrap 
} 

行うための最善のことは、両方のクラスのために継承するオーバーフローを設定することで、この問題が魔法のように消えている：このCSSファイルのコーダーは、グリッドセルがoverflow: hidden;（ライン3324の周りに）持っていなければならないことを決めました。

残っているのはグリッドテーブルの境界ですが、CSSにCSSスタイリングを置くだけで対応できます。 ext-all.cssファイルに入れないように助言します。

.x-grid-table { 
    border: none !important; 
    width: auto !important;  
} 

ただ、これはを使用するすべてのスタイルのためにそれを変更することを覚えておいてください。

Answer 4

私はExt 4.0.7を使用しています。

スクロール：真

私の作品

。しかし、何らかの理由で、誰かが追加した：

レイアウト：アンカー

を、それが動作を停止させたtreepanelの構成に。 scroll: trueが機能しない場合は、誰かがレイアウトを追加して削除したかどうかを確認してみてください。

希望に役立ちます。