ext 动态更新items

最新推荐文章于 2020-11-16 17:13:37 发布

darkness_j

最新推荐文章于 2020-11-16 17:13:37 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： ext border layout

本文链接：https://blog.youkuaiyun.com/darkness_j/article/details/6340997

本文介绍如何在ExtJS中通过使用一个无布局的外部Panel来动态替换具有border布局的内部Panel，以实现组件的灵活更换而不破坏整体布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先父元素的不能是border布局，可以设置一个无布局的panel，来包装有border 布局的panel，这样只需删除和添加这些有布局的panel，保持无布局panel不变即可，例如：

              patient_visitgrid = new com.sinosoft.patientVisitGrid({
                    title:'随访列表',
                    collapsible : true,
                    frame : true,
                    region : 'south',
                    height:100
                });
                patient_grid = new com.sinosoft.patientmanagerGrid({
                    frame : true,
                    region : 'center',
                });

                patient_result_panel = new Ext.Panel( {
                    layout:'border',
                    items:[patient_grid,patient_visitgrid],
                    collapsible : true,
                    height:310,
                    region : 'center',
                    frame : true,
                });

                    result_panel = new Ext.Panel( {
                        items:[ patient_result_panel],
                        collapsible : true,
                        height:320,
                        region : 'south',
                        frame : true,
                        title:'查询结果'
                    });

                    vp = new Ext.Viewport( {
                        layout:'border',
                        items:[querypanel,result_panel]
                    });

需要移除和添加时调用
resultPanel.remove(patient_result_panel ),
resultPanel.add(provider_result_panel ),
result_panel.doLayout();

即可