在tabpanel中动画显示和隐藏视图 - Ext JS

Posted 2021-04-05

我正在使用ExtJS 6.0.1。我的视图端口中心和东部区域配置了Ext.tab.Panel。我用一个按钮来显示和隐藏中心和北部区域。我可以用show（）和hide（）方法完美地做到这一点。有没有办法通过向任何方向滑动来为视图设置动画

xtype      : 'app-main',
    controller : 'main',
    viewModel  : {
        type: 'main'
    },
    layout     : {
        type: 'border'
    },
    initComponent: function(){
        var me = this;
        Ext.applyIf(me,{
            items   : [{
            region      : 'center',
            xtype       : 'layoutP1',
            split       : true,            
            flex        : 1
        },{
            region      : 'east',
            xtype       : 'layoutP2',
            layout      : 'fit',
            split       : true,
            hidden      : true,
            flex        : 1
        }]
     });

我在页脚上使用一个按钮来显示/隐藏中心和东部区域的面板

onClickP1: function() {
        this.getP2layout().flex = 2000;
        this.getP1layout().show();
        this.getP2.hide();
    },
onClickP2View: function() {
        this.getP2layout().flex = 2000;
        this.getP1layout().flex = 2000;
        this.getP1layout().hide();
        this.getP2layout().show();
    }

有了这个，我可以显示和隐藏面板，但我需要根据区域从左到右/从右到左动画滑动。

有没有办法使用Splitters做同样的事情？我可以看到Panel默认情况下它带有拆分器来折叠和展开面板。

答案

为此你需要在slideIn元素（dom）上使用panel/veiw。

slideIn将元素滑入视图。可以选择传递锚点以设置幻灯片效果的原点。如果需要，此函数自动处理使用固定大小的容器包装元素。有关有效的锚点选项，请参阅Ext.fx.Anim类概述。

用法：

// default: slide the element in from the top
el.slideIn();

// custom: slide the element in from the left with a 2-second duration
el.slideIn('l', { duration: 2000 });

// common config options shown with default values
el.slideIn('r', {
    easing: 'easeOut',
    duration: 500
});

在这个FIDDLE中，我创建了一个演示。我希望这能指导您实现您的要求。

代码片段

Ext.create('Ext.tab.Panel', {
    height: window.innerHeight,
    renderTo: document.body,
    items: [{
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'Center Region',
            region: 'center', // center region is required, no width/height specified
            xtype: 'panel',
            itemId: 'p1',
            layout: 'fit',
            split: true
        }, {
            // xtype: 'panel' implied by default
            title: 'East Region is collapsible',
            layout: 'fit',
            region: 'east',
            itemId: 'p2',
            xtype: 'panel',
            split: true,
            hidden: true
        }],
        buttons: [{
            text: 'P1',
            disabled: true,
            handler: function () {
                this.up('tabpanel').doHideShow(this)
            }
        }, {
            text: 'P2',
            handler: function () {
                this.up('tabpanel').doHideShow(this)
            }
        }]
    }],

    //For hide/show view on basis of button click P1/P2
    doHideShow: function (btn) {
        btn.setDisabled(true);
        if (btn.getText() == 'P1') {
            this.down('#p1').show().setWidth('100%').getEl().slideIn('l');
            this.down('#p2').hide();
            this.down('[text=P2]').setDisabled(false);
        } else {
            this.down('#p2').show().setWidth('100%').getEl().slideIn('r');
            this.down('#p1').hide();
            this.down('[text=P1]').setDisabled(false);
        }
    }
});