javascript extjs 树面板中的滚动条不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6745395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollbar in extjs tree panel does not work
提问by alex
Sometimes it happens that the scrollbar of my tree panel does not work anymore. While it's still possible to move the scrollbar, the tree doesn't move at all anymore. That happens to me in Firefox and in Chrome as well.
有时会发生我的树面板的滚动条不再起作用。虽然仍然可以移动滚动条，但树根本不再移动。我在 Firefox 和 Chrome 中也会发生这种情况。
Here is the source of my tree panel:
这是我的树面板的来源：
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'), } }); } } ] }]});
回答by Molecular Man
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). To remove custom scroller add the following to the config:
我遇到了同样的问题。他们使用自定义滚动条，而且有很多问题（尤其是在 chrome 中）。要删除自定义滚动条，请将以下内容添加到配置中：
var tree = Ext.create('Ext.tree.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I haven't tried it for treepanel. But it worked perfectly for the gridpanel (since both tree and grid are just extensions of Ext.panel.Table the solution should work for treepanel too).
我还没有尝试过树面板。但它对 gridpanel 非常有效（因为树和网格都只是 Ext.panel.Table 的扩展，所以解决方案也适用于 treepanel）。
回答by Brian Moeskau
The custom scrollers will be replaced with native scrolling again in Ext 4.1. The virtualized scrollers were intended to support infinite scrolling, column locking, etc. but I believe in 4.1 they've managed to solve those and still retain native scrollbars. I'd be surprised if the current issues in 4.0.x ever get resolved because of that.
自定义滚动条将在 Ext 4.1 中再次替换为原生滚动条。虚拟化滚动条旨在支持无限滚动、列锁定等。但我相信在 4.1 中，他们已经设法解决了这些问题，并且仍然保留了原生滚动条。如果 4.0.x 中的当前问题因此得到解决，我会感到惊讶。
回答by user1226772
In EXT 4.0, located within the ext-all.css file under resources of the main library, is the real reason that this doesn't work. The coders of this css file decided that the grid cell should have overflow: hidden;(around line 3324):
在 EXT 4.0 中，位于主库资源下的 ext-all.css 文件中，这是这不起作用的真正原因。这个 css 文件的编码人员决定网格单元应该有overflow: hidden;（大约第 3324 行）：
.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
}
The best thing to do is to set the overflow to inherit for both classes and this problem is magically gone.
最好的办法是将溢出设置为继承两个类，这个问题就神奇地消失了。
The only thing left is the border of the grid table, but that can be taken care of by just placing css styling in your css. I advice not to place it in the ext-all.css file.
唯一剩下的是网格表的边框，但这可以通过在 css 中放置 css 样式来解决。我建议不要将它放在 ext-all.css 文件中。
.x-grid-table {
border: none !important;
width: auto !important;
}
Just remember that this will change it for any style that uses .x-grid-cell.
请记住，这将更改任何使用.x-grid-cell.
回答by Homer6
I'm using Ext 4.0.7.
我正在使用 Ext 4.0.7。
scroll: true
滚动：真实
works for me. But, for some reason, someone had added:
对我来说有效。但是，出于某种原因，有人补充说：
layout: anchor
布局：锚
to the configuration of the treepanel, which was causing it to stop working. If you find that scroll: trueisn't working, try seeing if someone has added a layout and remove it.
到树面板的配置，这导致它停止工作。如果您发现这scroll: true不起作用，请尝试查看是否有人添加了布局并将其删除。
Hope that helps.
希望有帮助。
