通过Extjs中的Tree在右侧加载TabPanel的具体实现

最近在做一个物流管理项目，公司必须用Extjs4.1作为接口，因为之前从来没有接触过，所以在开发过程中遇到了很多困难。同时，Extjs4.1的数据在互联网上相对较少。好了，不要废话代码：1。复制左边功能树的代码如下： ext . define(' am . view . system tree '，{extend3360' ext.tree.panel '，别名：' widget.systemtree '，RootVisible : false，//不显示rootdisplayfield :' text '，//title 3: '物流运输系统'，ViewConfig : {//带拖放功能的插件： { ptype 3360 ' treeget ('text ')到： ' overmodel . get(' text ')；} } }，dockedItems : [ { xtype : '工具栏'，Items : [ { xtype : '按钮'，id : 'allopen '，Icon : ' resources/img/lock _ open . png '，text: '全部展开' }，{xtype3360 '按钮'，id:' allclose '，Icon 3360 ' resources/img/lock . png '，Text 3: ' icon 3360 ' resources/img/report _ edit . png '，leaf : true，id :' vehicle list '，//要点在这里，这里的id要指定为你要打开的视图的别名}]})； 要点：树千万别忘了加别名别名。将树结构的子节点的id值设置为您需要在右侧显示的视图的别名别名。请参考下面的视图代码。2.需要打开的对应视图复制代码如下： ext . define(' am . view . transport ATI)。打开。必须在此处设置vehiclelist '，{extend:' ext.grid.panel '，alias:' widget.vehiclelist '，//alias id:' vehiclelist '，store3360' vehiclestore '。中间代码省略了列： [{text: '车号'，数据索引： '车号'，字段： { xtype : ' textfield '，allowblank3360 false}}。{text: '车辆描述'，xtype: '模板列'，tpl: '车辆编号为{vehicleNo}且区域为{vehicleArea}'}]，init component 3360 function(){ this。callparent(参数)；} });3.在右侧创建一个TabPanel复制代码。代码如下： ext . define(' am . view . tabpanel '，{//主页面的tab panel，extend :' ext.tab.panel '，alias 3360' widget.tabpanel '，Closeaction :' destroy '，默认值： {body padding 3360 10}，items: [{title 3360' home page '，autoload3360' content.jsp'/只有一个基本面板}]，})；4.设置点击树的触发事件复制代码如下：‘系统树’: {项点击：函数(树、记录、项、索引、e、选项){ vartabs=tree。owner CT . owner CT . child(# center-grid ')。//获取当前点击的节点var treeNode=record.rawvar id=treeNode.idvar text=treeNode.text//获取具有相同被点击树节点的tab标签var tab=tab . getcomponent(id)；if(！Tab){//如果没有制表符，则添加({//新建一个表：id，closeable3360True，title:Text，iconcls:ID，xtype 3360 ID//与树的文本ID对应的TabPanel，相当于将对应的视图填充到TabPanel中。}else{//if制表符；setactivetab(选项卡)存在；//Active}}}，结果是： 。

总结：Extjs的效果确实很耀眼，但是也很难学，特别是对于更新的版本，网上很难找到什么好的教程。好在我们有API，可以在API中多练习一些例子，这样可以快速掌握。最近刚接触Extjs。希望各位神仙不要吐槽！