动画（滑入）新面板以替换当前面板的内容？

发布于 2024-12-07 01:36:19 字数 384 浏览 0 评论 0原文

我正在尝试更改 Ext.List 的内容。我正在尝试将内容更改为新面板，尽管我不需要更多列表元素。

这似乎替换了内容，但如何为更改设置动画？

onItemDisclosure: function(record, btn, index) {
    console.log('Disclose more info for ' + record.get('name'));
    var panel1 = Ext.getCmp('panel-1');
    panel1.remove(Ext.getCmp('panel-1'));
    panel1.add(Ext.getCmp('panel-2'));
    panel1.doLayout();
}

原文

I'm trying to change the contents of an Ext.List. I'm trying to change the content to a new panel, although I don't need more list elements.

This seems to replace the contents, but how do I animate the change?

onItemDisclosure: function(record, btn, index) {
    console.log('Disclose more info for ' + record.get('name'));
    var panel1 = Ext.getCmp('panel-1');
    panel1.remove(Ext.getCmp('panel-1'));
    panel1.add(Ext.getCmp('panel-2'));
    panel1.doLayout();
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贪恋 2024-12-14 01:36:19

最好的方法是将 panel-1 和 panel-2 作为不同面板中的项目，然后在它们之间切换。示例：

    var detailPanel = new Ext.Panel({
            fullscreen: true,
            id:'detailPanel',
            scroll:'vertical',
            tpl:'<h1>{text}</h1>'
    });

   var list = new Ext.List({
        id :'theList',
        itemTpl : '{firstName} {lastName}',
        store: store1,
        width: '100%',
        scroll:false
    });

   var panel =  new Ext.Panel({
        fullscreen: true,
        id:'thePanel',
        layout: 'card',
        cardSwitchAnimation:'slide',
        scroll:'vertical',
         items:[list, detailPanel]
    });

然后您可以像这样Ext.getCmp('detailPanel').update(record.data);更新detailPanel并切换到它。 Ext.getCmp('thePanel').setActiveItem(1,{type:'slide',direction:'left'});

setActiveItem 的第二个参数是动画配置。目的。 http://dev.sencha.com/deploy/touch/docs/ ?class=Ext.Panel

The best is to have the panel-1 and panel-2 as items in a different panel and then switch between them. Example:

    var detailPanel = new Ext.Panel({
            fullscreen: true,
            id:'detailPanel',
            scroll:'vertical',
            tpl:'<h1>{text}</h1>'
    });

   var list = new Ext.List({
        id :'theList',
        itemTpl : '{firstName} {lastName}',
        store: store1,
        width: '100%',
        scroll:false
    });

   var panel =  new Ext.Panel({
        fullscreen: true,
        id:'thePanel',
        layout: 'card',
        cardSwitchAnimation:'slide',
        scroll:'vertical',
         items:[list, detailPanel]
    });

Then you can update the detailPanel like this Ext.getCmp('detailPanel').update(record.data); and switch to it. Ext.getCmp('thePanel').setActiveItem(1,{type:'slide',direction:'left'});

The second argument of the setActiveItem is the animation config. object. http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel

回复收藏 0 原文

~没有更多了~