Question

[解决]

我的UI中有三个网格。假设它们是A，B，C

问题是我在网格之间添加了两个分割器。我的网格A和C调整大小但网格B是固定的。

    --------------------------
             A
    ---------------------------
             B
    ----------------------------
             C




--------------------------------
            A



---------------------------------
            B
---------------------------------


             C
---------------------------------

我不知道如何编写代码来解释：P

代码：

  layout:{
        type:'vbox',
        align:'stretch',
        pack:'start',
        split:true,
        collapsible:true
  },
  items:[{
        xtype:'panel',
        layout:'fit',
        minHeight:200,
        flex:0.3,
        items:[{
            // add some grid or panel
         }]
       },
       {
         xtype:'splitter',
       },
       {
        xtype:'panel',
        layout:'fit',
        flex:0.3,
        minHeight:200,
        items:[{
            // add some grid or panel
         }]
        },
        {
        xtype:'splitter',
        },
        {
        xtype:'panel',
        layout:'fit',
        flex:0.3,
        minHeight:200,
            items:[{
            // add some grid or panel
         }]
        }]

http://jsfiddle.net/8Zesp/178/

Answer 1

在我工作的人们的帮助下，我们能够做到正确。它在jsfiddle中工作，因为它没有运行正确的extjs

这是拆分器代码（SplitterTracker）中的一个错误，它可以通过覆盖修复无论分割器移动的实际方向如何，都有一个'getWidth（）'硬编码。

我希望这有助于某人

Ext.override(Ext.resizer.SplitterTracker, {
    // Performs the actual resizing of the previous and next components
    performResize: function(e, offset) {
        var me        = this,
            splitter  = me.getSplitter(),
            orient    = splitter.orientation,
            prevCmp   = me.getPrevCmp(),
            nextCmp   = me.getNextCmp(),
            owner     = splitter.ownerCt,
            flexedSiblings = owner.query('>[flex]'),
            len       = flexedSiblings.length,
            i         = 0,
            dimension,
            size,
            totalFlex = 0;

      // BUGFIX here:
        var getSizeFunc = (orient === 'vertical') ? 'getWidth' : 'getHeight';

        // Convert flexes to pixel values proportional to the total pixel width of all flexes.
        for (; i < len; i++) {
            size = flexedSiblings[i][getSizeFunc]();
            totalFlex += size;
            flexedSiblings[i].flex = size;
        }

        offset = offset || me.getOffset('dragTarget');

        if (orient === 'vertical') {
            offset = offset[0];
            dimension = 'width';
        } else {
            dimension = 'height';
            offset = offset[1];
        }
        if (prevCmp) {
            size = me.prevBox[dimension] + offset;
            if (prevCmp.flex) {
                prevCmp.flex = size;
            } else {
                prevCmp[dimension] = size;
            }
        }
        if (nextCmp) {
            size = me.nextBox[dimension] - offset;
            if (nextCmp.flex) {
                nextCmp.flex = size;
            } else {
                nextCmp[dimension] = size;
            }
        }

        owner.updateLayout();
    }
});

网格分割器不调整中间网格extjs的大小

1 个答案: