0

我在尝试从 extjs 4.0.7 切换到 4.1.1 时遇到了一些问题。

第一个问题如下：

我有两个在列布局中的树形面板。一个紧挨着另一个。我的应用程序将一堆节点加载到左侧面板中，然后您可以选择将其中一些节点移动到另一个面板中。但是，带有所有节点的面板没有显示滚动条，因此我突然看不到大约 1/3 的节点。我在 4.0.7 中遇到了一个半相似的问题，如果面板已满，我无法看到最后一个节点移动，直到我移动另一个节点。我用以下几行修复了这个问题：

treePanel1.invalidateScroller();
treePanel2.invalidateScroller();

这些行在 4.1.1 中已弃用，问题似乎变得更糟。有没有人有类似的问题，我如何让我的滚动条回来。

与我的 UI 相关的第二个主要问题：

我在其他地方有两个彼此相邻的网格，其布局类似于树形面板。我已经在两个网格之间设置了拖放。同样，所有节点都从左侧网格开始，可以选择将一些节点拖到右侧网格中。但是，右侧网格现在没有以全尺寸显示，它默认为条子。因此，如果您知道将节点拖到那个小条子上，那么 DD 功能仍然存在。之后，sliver 膨胀到足以容纳单个节点，依此类推。那么，我如何让它恢复到默认的全尺寸。为什么 extjs 4.1.1 会导致这些问题？我必须在任何代码中增加手指，但如果绝对必要的话可以。但是，如果有人根据我的描述熟悉此类问题，那就太好了。

编辑：另外，我在网格的最右边一列有一个组合框。当我单击以更改其中一个组合框时，会弹出一个迷你滚动条，以阻止下拉按钮。他们对这个版本做了什么？

这是布局定义，我遇到的第一个问题是滚动条在需要时没有显示在面板上：

{
    xtype: 'panel',
    title: 'Select fields',
    defaults: {
        border: false,
        height: '100%'
    },
    layout: 'column',
    items: [

        {
        xtype: 'treepanel',
        itemID: 'choicesTreePanel',
        title: 'Choose from below fields',
        height: '100%',
        multiSelect: true,
        store: choicesTree,
        rootVisible: false,
        columnWidth: .44},

    {
        xtype: 'panel',
        columnWidth: .06,
        layout: {
            type: 'vbox',
            align: 'center'
        },
        defaults: {
            margins: "15 0 0 0"
        },
        items: [
            {
            xtype: 'button',
            text: '==>'},
        {
            xtype: 'button',
            text: '<=='},
        {
            xtype: 'button',
            text: 'RST'}

             ]},
    {
        xtype: 'treepanel',
        itemId: 'chosenTreePanel',
        title: 'Fields',
        border: true,
        store: chosenFields,
        rootVisible: false,
        columnWidth: .44,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop,
        dragText:'
                dragginggggg '
        },
        ddGroup: '
                fieldsDD '        
        }
        },
        {xtype:'
                panel ',
        columnWidth:.06,
        layout:{
        type:'
                vbox ',
        align:'
                center '
        },
        items: [
            {
            xtype: '
                button ',
            text: '
                UP '},
        {
            xtype: '
                button ',
            text: '
                DOWN '}

             ]
        }

        ]
 }

编辑：在左侧面板上，如果我将高度设置为设定值，并且自动滚动为真，我有一个滚动条。如果我将高度设置为“100%”并且自动滚动为真，则没有滚动条。所以一个解决方案可能是找出如何让面板适合父级的高度，同时保持滚动条

4

2 回答 2

1

（也许最好将您的问题分成多个单独的问题）

关于面板高度和滚动条的第一个问题：

在您的示例中，我会问自己一个问题“我希望树形面板具有与什么相关的 100% 高度？”。

当您不关心与其父元素相关的子元素的高度时，通常使用列布局：子元素的高度之和定义列的高度，如您在此处看到的：http://docs .sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html。

您没有在列上定义任何高度，因此它使用子元素的高度（在您的示例中没有高度）。我不知道 Ext 在这种情况下做了什么，但基于此，它不能做任何聪明的事情。

如果您希望树形面板使用包含面板的整个高度，您可以使用将 align 属性设置为stretch的hbox布局。这也可能修复滚动条，因为高度计算可以正确完成。不要忘记删除“height: 100%”和“autoscroll”属性，因为它们混淆了。

最后，将树形面板的布局更改为“适合”可能会给您想要的结果。

你的代码可能会变成这样：

{
    xtype: 'panel',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'treepanel',
        layout: 'fit',
        flex: 44,
        ...
    }, {
        flex: 6,
        ...
    },{
        flex: 44,
        ...
    }]
}

我没有在你的代码上测试这个答案。请提供完整的工作代码示例（带有虚拟商店），我将对其进行测试。

于 2012-09-19T14:14:32.123 回答
1

尽管您正在寻找基于百分比的高度解决方案，但您也可以使用恒定值高度。在许多情况下，这将避免您的问题。例如，将面板设置为 600 高度，这应该可以解决滚动问题。

这不能解决您在基于百分比的布局中的问题。希望其他人可以提供帮助。

于 2012-09-24T18:53:27.150 回答