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。

相关文章

SpringBoot基于配置实现短信服务策略的动态切换

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商（如阿里云、腾讯云、华为云）后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置（application.yml）配置类绑定短信发送策略接口示例：阿里云 & 腾
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2