在Extjs中,实现左侧功能树到右侧TabPanel的动态加载是一个常见的需求。为了完成这一需求,开发者需要利用Extjs的组件和事件系统。具体来说,在Extjs4.1版本中,涉及到的主要知识点包括Ext.tree.Panel(用于展示树形结构),Ext.tab.Panel(用于展示Tab页)以及Ext店铺中组件的扩展和事件绑定。 让我们深入了解如何定义左侧的功能树。功能树本质上是一个Ext.tree.Panel,它继承了panel的所有属性,并通过配置属性来展示树形结构。在这里,我们定义了一个名为AM.view.SystemTree的类,这个类继承自'Ext.tree.Panel'。为了方便在其他地方引用,我们给它设置了一个别名'widget.systemTree'。在这个组件的定义中,我们使用了'dockedItems'来添加一个工具栏,其中包括了展开全部和收起全部按钮。而最核心的部分是树节点的定义,我们在这里设置了一个根节点,并在其下定义了子节点和更深层次的子节点。重要的是,子节点的id要与右侧TabPanel中需要打开的view的别名alias相匹配。例如,在本例中,'vehiclelist'即为一个叶子节点的id,它将与相应的视图组件关联起来。 接下来看如何定义view。在Extjs中,视图通常是由Ext.define()方法定义的。对于需要通过Tree加载的视图,我们同样需要为其设置一个别名,这一步非常关键。别名通常使用'widget.'前缀加上视图的名称,如'widget.vehiclelist'。此外,在view的定义中还可以添加诸如store、columns等属性来定义该视图需要展示的数据结构和字段。 第三步是建立一个右侧的TabPanel。这个TabPanel将包含多个tab页卡,每个tab页卡都是一个Ext.tab.Panel的实例。在这个示例中,我们定义了一个名为AM.view.TabPanel的类,它继承自'Ext.tab.Panel'。我们通过'alias'给它设置了一个别名'widget.tabpanel'。TabPanel通常包含多个item,每个item代表一个tab页卡。在本例中,我们仅设置了一个item,其标题为'主页',并且通过'autoLoad'属性自动加载了'content.jsp'页面内容。 我们来看如何将Tree组件与TabPanel关联起来。这一步需要使用到Extjs的事件系统。我们为Tree组件绑定了一个事件处理函数'itemclick',它会在Tree的节点被点击时触发。在这个事件的处理函数中,我们将获取到被点击的节点信息,并据此来选择在右侧TabPanel中打开的视图。在示例代码中,我们通过访问'ownerCt'属性来获取TabPanel的引用,然后通过TabPanel的方法来切换到相应的tab页卡。 需要注意的是,在实际开发中可能会使用到其他Extjs组件和方法,如事件处理、组件生命周期回调函数等。例如,在Tree组件的定义中,我们可以在'dockedItems'中添加工具栏按钮,并为其绑定点击事件,这样可以方便地控制树形结构的展开和收缩。此外,在view组件的定义中,我们还可以为视图添加更复杂的配置,如表格的排序功能、编辑功能等。 通过Extjs实现左侧功能树到右侧TabPanel的动态加载,涉及到的主要知识点包括Ext.tree.Panel的使用、Ext.tab.Panel的使用、组件的扩展和别名设置、事件的绑定和处理。掌握了这些知识点,开发者就可以在Extjs框架下自由地开发出结构清晰、交互丰富的前端界面。






























- 粉丝: 4
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 5-某软件大厦幕墙施工方案.doc
- 吉林大学2021年9月《计算机维护与维修》作业考核试题及答案参考3.docx
- 百度互联网营销实验室建设方案(1).doc
- 第1章数据库系统概论资料讲解.ppt
- 了解多媒体计算机及其作用;了解多媒体基本概念讲解学习.ppt
- 电子商务国家职业标准.doc
- 软件工程张海藩课后习题答案复习课程.ppt
- 吉林大学2021年9月《可编程控制器》作业考核试题及答案参考16.docx
- 第11章Java数据库编程上课讲义.ppt
- 南开大学2021年9月《大数据开发技术》作业考核试题及答案参考19.docx
- 第3章计算机网络基础与INTETNET应用课件教材课程.ppt
- 互联网背景下会计学专业混合式教学模式研究.docx
- 童装电子商务的市场分析和营销策略.doc
- SimpleAmqpClient-2.5.1的编译库
- Android NDK LTS 版本 (android-ndk-r27d-linux.zip)
- 《oracle10gAS搭建》PPT课件(1).pptx


