extjs 树面板中的滚动条不起作用

Question

有时，我的树面板的滚动条不再起作用。虽然仍然可以移动滚动条，但树根本不再移动。我在 Firefox 和 Chrome 中也遇到过这种情况。

这是我的树面板的来源：

 var treeStore = Ext.create('Ext.data.TreeStore', {
    代理人： {
        类型：'ajax'，
        网址：'../tree.pl'
    }
});

 var tree = Ext.create('Ext.tree.Panel', {
    商店：树商店，
    渲染到：'树'，
    标题：“树”，
    宽度：400，
    身高：450，
    根可见：假，
    停靠项目：[{
        xtype: '工具栏',
        码头：'底部'，
        项目： [
        {
            xtype: 'tbspacer',
            宽度：340
        },
        {
            文本：“搜索”，
            处理程序：函数（）{
                        名称=[]；
                        Ext.Array.each(tree.getView().getChecked(), 函数(rec){
                            名称.push(rec.get('text'));
                        });

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


 });

Answer 1

在 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
}

最好的办法是将溢出设置为继承两个类，这个问题很神奇走了。

唯一剩下的就是网格表的边框，但这可以通过在 css 中放置 css 样式来解决。我建议不要将其放在 ext-all.css 文件中。

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

请记住，这将更改任何使用 .x-grid-cell 的样式。

Answer 2

我也遇到过同样的问题。他们使用自定义滚动条，而且有很多错误（特别是在 Chrome 中）。要删除自定义滚动条，请将以下内容添加到配置中：

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

我还没有在树面板中尝试过它。但它非常适合网格面板（因为树和网格都只是 Ext.panel.Table 的扩展，该解决方案也应该适用于树面板）。

Answer 3

在 Ext 4.1 中，自定义滚动条将再次被本机滚动条所取代。虚拟化滚动条的目的是支持无限滚动、列锁定等，但我相信在 4.1 中他们已经成功解决了这些问题，并且仍然保留了原生滚动条。如果 4.0.x 中当前的问题因此得到解决，我会感到惊讶。

Answer 4

我正在使用 Ext 4.0.7。

滚动：true

对我有用。但是，出于某种原因，有人补充道：

布局：锚

到树面板的配置，这导致它停止工作。如果您发现 scroll: true 不起作用，请尝试查看是否有人添加了布局并将其删除。

希望有帮助。