隐藏/删除空旋转木马卡

Hide/remove empty carousel card

本文关键字：旋转木马 删除 隐藏      更新时间：2023-09-26

我定义了一个包含(1)carousel的表单:

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，则字段集被隐藏到不可见的程度。然而，旋转木马仍然有两张卡片，但是第二张是空的。我怎样从旋转木马上取下卡片?

在这种情况下，可以使用简单的面板容器与卡片布局。对于操作carousel项目，我建议查看carousel无限源代码，有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);
        }
    }
}

希望能有所帮助

可以使用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...
},
相关文章：