Extjs中ViewPort动态更换Panel

2024-05-01 21:58
文章标签 动态 frontend 更换 extjs panel viewport

本文主要是介绍Extjs中ViewPort动态更换Panel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们在使用extjs进行开发单页面应用时，我们构建了一个viewport有时候可能希望对viewport中的items进行动态替换，网上也有很多的资料但是都只说了个大概并没有详细说明，这里我将对遇到这种需求时如何处理进行详细介绍。
环境

extjs 4.2

首先我们来看viewport

/*** 菜单model*/
Ext.define('Menu', {extend: 'Ext.data.Model',fields: [{name: 'id',type: 'string'}, {name: 'text',type: 'string'}, {name: 'url',type: 'string'}, {name: 'leaf',type: 'boolean'}]
});Ext.onReady(function () {Ext.BLANK_IMAGE_URL = json_base.ExtBlankUrl;progress = Ext.create('Ext.Img', {src: '/img/system/loading_32x32.gif',renderTo: Ext.getBody(),floating: true}).hide();Ext.create('Ext.container.Viewport', {id: 'xnzbViewport',layout: 'border',renderTo: Ext.getBody(),items: [material_zbTree()]});
});/*** 构建指标树* @returns {Ext.tree.Panel}*/
function material_zbTree() {var url = '';return Ext.create('Ext.tree.Panel', {region: 'west',id: 'plWest',title: '指标体系',width: 300,split: true,minWidth: 200,rootVisible: true,useArrows: true,collapsible: true,store: Ext.create('Ext.data.TreeStore', {nodeParam: 'id',model: 'Menu',root: {id: '',text: '指标',url: url,leaf: false,expanded: false},proxy: {type: 'ajax',url: '/m/zb/treeNode'}}),listeners: {'itemclick': function (view, record, item, index, e) {var id = record.get('id');var text = record.get('text');var url = record.get('url');json_base.SelectedNodeId = id;json_base.url = url;material_LoadItems({id: id, text: text, url: url});},//单击节点展开之前的事件'beforeitemclick': function (view, record, item, index, e) {return;}}});
}

首先我构建了一个viewport，这个viewport的west有一个树形菜单，树形菜单是多级树形菜单，针对没级的菜单需要加载特定的panel，我们来看看两个panel

var yjxnGridStore = Ext.create('Ext.data.Store', {storeId: 'xnzb_yjxn_store_grid',autoLoad: false,model: 'yjxnModel',pageSize: 20,proxy: {type: 'ajax',url: 'm/xnzb/yjxn',reader: {type: 'json',root: 'items',totalProperty: 'totalCount'},extraParams: {},startParam: 'start',limitParam: 'limit'}
});function material_yjxnGridPanel() {var cllbStore=material_cllbStore('yjxnCllb','m/cltx/lb/all');var clzlStore=material_clzlStore('yjxnClzl','m/cltx/zl/json');var clxlStore=material_clxlStore('yjxnClxl','m/cltx/xl/json');return Ext.create('Ext.grid.Panel', {id: 'plCenter_yjxn',layout: 'fit',region: 'center',xtype: 'grid',autoScroll: true,split: true,selType: 'rowmodel',title: "条目指标数据<span id='id_selected_text'></span>",store: yjxnGridStore,columns: [{text: '操作', dataIndex: 'sLinks'},{text: '条目指标编号', dataIndex: 'code'},{text: '条目指标名称', dataIndex: 'name'}],dockedItems: [{xtype: 'toolbar',dock: 'top',items: [{xtype: 'combo',id: 'secondYjxn',fieldLabel: '条目1',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: cllbStore,value: '',listeners: {'change': function (obj, selectValue) {Ext.getCmp('thirdYjxn').value = '';clzlStore.proxy.url = 'm/cltx/zl/json/' + selectValue;clzlStore.reload();yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {xtype: 'combo',id: 'thirdYjxn',fieldLabel: '条目1',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: clzlStore,value: '',listeners: {'change': function (obj, selectValue) {Ext.getCmp('fourthYjxn').value = '';clxlStore.proxy.url = 'm/cltx/xl/json/' + selectValue;clxlStore.reload();yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {xtype: 'combo',id: 'fourthYjxn',fieldLabel: '条目',labelWidth: 50,allowBlank: true,queryMode: 'local',displayField: 'name',valueField: 'code',store: clxlStore,value: '',listeners: {'change': function (obj, selectValue) {yjxnGridStore.proxy.extraParams = {fourthcode: selectValue};yjxnGridStore.reload();}}}, {text: '添加条目',handler: function () {material_Yjxn_Add();}}]}, {xtype: 'pagingtoolbar',id: 'xnzb_yjxn_grid_pagingtoolbar',store: Ext.getStore('xnzb_yjxn_store_grid'),dock: 'bottom',displayInfo: true}]});
}

推荐所有的panel的构建都通过function来进行，这里基础的环境就有了，下面我们就来看看如何动态的切换panel

function material_LoadItems(j) {var gridPanel;if (j.id == 'firstXingneng') {gridPanel = material_yjxnGridPanel();}if (j.id == 'secondXingneng') {gridPanel = material_ejxnGridPanel();}if (j.id == 'thirdXingneng') {gridPanel = material_sjxnGridPanel();}var viewPort = Ext.getCmp('xnzbViewport');viewPort.items.each(function (item) {if (item.getId() == 'plCenter_yjxn' || item.getId() == 'plCenter_ejxn'|| item.getId() == 'plCenter_sjxn' || item.getId() == 'plCenter_khtm'|| item.getId() == 'plCenter_tzxn') {viewPort.remove(item, false);item.hide();}});//viewPort.remove(viewPort.items[2],false);gridPanel.getStore().reload();gridPanel.show();viewPort.add(gridPanel);viewPort.doLayout();
}

viewport通过调用material_LoadItems方法来动态加载panel，并实现动态切换
具体的思路就是
1、获取到viewport
2、遍历viewport的items移除当前的panel，记住这里采用的是viewPort.remove(item, false);其中false表示的是只是从viewport移除这个panel但是并没有销毁这个panel，同时要注意一个方法item.hide();就是移除的这个panel需要隐藏，不然会跟新添加的panel重叠导致问题出现（我就是遇到这个问题，花了很长时间才找到这个问题）
3、移除完了panel后再添加自己想要添加的panel，同时需要调用viewport的doLayout方法显示新添加的panel
这样就完成了viewport的panel的动态切换

这篇关于Extjs中ViewPort动态更换Panel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/952768。

相关文章

go动态限制并发数量的实现示例

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发，所以面试百分百会问到
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...
一文详解SpringBoot中控制器的动态注册与卸载

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注
阅读更多...
springboot如何通过http动态操作xxl-job任务

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》：本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2