ext中关于替换布局中的panel

最新推荐文章于 2021-06-03 04:05:18 发布

原创最新推荐文章于 2021-06-03 04:05:18 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ext #layout #function #border #任务 #url

本文介绍使用ExtJS框架通过两种方法实现动态替换面板中的内容。一种是在Viewport的Center区域预定义一个Panel，并在其内添加或替换组件；另一种是利用Card Layout布局特性，通过切换活动项来达到内容替换的效果。

今天做任务碰到一个问题：左边是一颗树，右边是一个grid的布局；当点击左侧树的时候可以动态的“替换”掉右边的grid。

由于右侧的grid是被二次封装过的，所以不能简单的用之前替换url的方法去解决这个问题。所以想到动态去替换panel中的item方法。这个有两个解决的方法，解法不同但是本质上都是操作一个先定义好的容器panel，再对其中需要的组件进行操作。

（以下的示例没有贴完全的代码，部分实现需要自己去完成，如触发事件如何去写）
第一个：在viewport的center里先定义好一个容器panel，然后把要替换的组件加到此panel里

示例代码：

//定义主面板
this.panel =  new Ext.Panel({
   region:'center',
     margins:'1 1 1 1',
       layout:'fit',
       items:[viewPanel ]
    });


new Ext.Viewport({
       layout : 'border',
     title : '替换右侧grid',
       items : [this.tree,this.panel ]

)}

//这里填写树的触发事件

tree.on("click", function(){

this.panel.add(viewPanel); //
this.doLayout();

})

第二个：第二个方法不是用“替换”，而是利用新的布局cardLayout，具体示例：

    var panel = new Ext.Panel({
       region : 'center',
       layout: 'card',
       activeItem : 0,
       items: [initPanel] //初始化时需要显示的grid
   });

   tree.on("click", function(){

        panel.add(xxx); //xxx代表你要添加的grid
        panel.getLayout().setActiveItem(1); //利用cardLayout特有的方法，直接显示第二个item
   });