Question

我已经定义了一个包含（1）轮播的表单：

items: [{
    xtype:'carousel',
    items:[{
        xtype:'fieldset'
        items:[{
            xtype:'textfield',
            name:'overview1',
            label: 'Overview 1'
        }]
    },{
        xtype:'fieldset',
        itemId:'details',
        items:[{
            xtype:'textfield',
            name:'detail1',
            label: 'Detail 1'
        }]
    }]
}]

和（2）构造函数

constructor:function(record) {
    ...
    if(record.get("showDetails")) this.down('fieldset[itemId=details]').show()
    else this.down('fieldset[itemId=details]').hide()
    ...
}

如果我有 showDetails == false ，则字段集将隐藏到该字段不可见的位置。然而，旋转木马仍然有两张卡，但第二张是空的。如何从转盘中取出卡？

Answer 1

在这种情况下，可以使用带卡布局的简单面板容器。对于操纵轮播项目我建议查看carousel infinite source code，有rebuildInnerIndexes方法，其中项目从列表中删除

rebuildInnerIndexes: function(activeIndex) {
    var indexToItem = this.innerIndexToItem,
        idToIndex = this.innerIdToIndex,
        items = this.innerItems.slice(),
        ln = items.length,
        bufferSize = this.getBufferSize(),
        maxIndex = this.getMaxItemIndex(),
        changedIndexes = [],
        i, oldIndex, index, id, item;


    if (activeIndex === undefined) {
        this.innerIndexToItem = indexToItem = {};
        this.innerIdToIndex = idToIndex = {};

        for (i = 0; i < ln; i++) {
            item = items[i];
            id = item.getId();
            idToIndex[id] = i;
            indexToItem[i] = item;
            this.fireEvent('itemindexchange', this, item, i, -1);
        }
    }
    else {
        for (i = activeIndex - bufferSize; i <= activeIndex + bufferSize; i++) {
            if (i >= 0 && i <= maxIndex) {
                if (indexToItem.hasOwnProperty(i)) {
                    Ext.Array.remove(items, indexToItem[i]);
                    continue;
                }
                changedIndexes.push(i);
            }
        }

        for (i = 0,ln = changedIndexes.length; i < ln; i++) {
            item = items[i];
            id = item.getId();
            index = changedIndexes[i];
            oldIndex = idToIndex[id];

            delete indexToItem[oldIndex];

            idToIndex[id] = index;
            indexToItem[index] = item;
            this.fireEvent('itemindexchange', this, item, index, oldIndex);
        }
    }
}

希望这有帮助

Answer 2

可以使用remove / removeAt函数来摆脱面板。但是，当选项卡可能包含表单数据时，这确实需要一些工作，并且应该在以后重新插入，预先填充删除选项卡之前的表单数据。不过，我还想提交表单数据。

所以我只是用一个函数来隐藏该标签：

onActiveTabChange:function(carousel, newValue, oldValue, eOpts) {
    var items = carousel.getItems(),
        newIndex = items.indexOf(newValue),
        details = carousel.down('field[name=DetailsTab]').getValue();
    if(!details && newIndex==2) carousel.setActiveItem(0);
    // WTF moment n° 4711: newIndex can be 1 or 2 because index 0 is the indicator; but setActiveItem takes 0 or 1...
},

隐藏/删除空转盘卡

2 个答案: