ExtJS是通过树的右侧表示标签面板加载的实现

最近，一个物流管理项目已经完成。公司必须要求extjs4.1做界面，因为它从来没有接触过，所以在发展过程中存在许多困难。同时，对extjs4.1数据都比较小，在互联网上。好了，不说废话的代码：
1。左边功能树
复制代码代码如下所示：
ext.define（是。观。systemtree
延伸：'ext.tree面板，
Alias：'widget systemtree，
rootvisible：假，根/ /显示
displayfield：中，
标题：物流运输系统，
ViewConfig：{ / /拖放
插件：{
Ptype：'treeviewdragdrop
}，
侦听程序：
滴：功能（节点、数据、overmodel，dropposition，选项）{
警报（：+数据。记录{ 0 }。得到（中的）+移动到：
+ overmodel.get（中的））；
}
}
}，
dockeditems：{ {
Xtype：'toolbar，
项目：{
Xtype：按钮，
身份：'allopen，
图标：资源 / / lock_open PNG的IMG，
正文：展开
{ }。
Xtype：按钮，
身份：'allclose，
图标：资源 / / IMG PNG的锁，
课文：拿起一切
} }
} }，
根：{
正文：'root，
叶：假的，
ID：'0'，
子：{
文本：运输管理，
选中：false显示选定的
叶：false是一个叶子节点
图标：资源 / / folder_user PNG的IMG，
编号：01，
子：{
文本：车辆信息管理，
检查：假，
图标：资源 / / report_edit PNG的IMG，
叶：真的，
身份：'vehiclelist ' / /要点在这里，这里是ID指定要打开的视图的名称
} }
} }
}
}）；

要点如下：
树不能忘记添加别名别名。
设置树结构的子节点的ID值是您需要在视图右侧显示的别名别名（重要）-参考下面的视图代码
2。需要打开的相应视图
复制代码代码如下所示：
ext.define（是。观。运输。vehiclelist
延伸：'ext.grid面板，
Alias：'widget。vehiclelist '，你必须设置别名 / /这里
身份：'vehiclelist，
店：'vehiclestore，
中间代码省略
列：{
{文本：'vehicle数，'vehicleno dataIndex：'，
现场：{
Xtype：'textfield，
allowblank：假
}
}，
{文本：'vehicle描述，X型：'templatecolumn，
物流数量：'vehicles，{ vehicleno } { }vehiclearea面积
}
}，
initcomponent：函数（）{
this.callparent（参数）；
}
}）；

三.在正确的设置表示标签面板
复制代码代码如下所示：
Ext.define（夫人的观点。表示标签面板，{ / /页面的标签面板
延伸：'ext.tab面板，
Alias：'widget表示标签面板，
closeaction：'destroy，
默认值：{
bodypadding：10
}，
项目：{
标题：首页，
加载：内容。JSP的 / /只有基本面板
} }，
}）；

4。设置单击树的触发事件
复制代码代码如下所示：
systemtree：{
Itemclick：功能（树、记录、项目、指标、E选项）{
标签= tree.ownerct.ownerct.ownerct VaR
。孩子（#中心网格）。孩子（#表示标签面板）；
获取当前节点
VaR TreeNode = record.raw；
var id = treenode.id；
var text = treenode.text；
单击同一个树节点获取标签标签
var标签= tabs.getcomponent（ID）；
如果（制表符！）{如果它不存在
Tabs.add（{ / /点击树节点的ID，一个新的标签文本
身份证：身份证，
合：真的，
标题：文本，
iconcls：ID，
Xtype：我 / /集对应的ID好表示标签面板树，和相应的观点充斥于TabPanel
}）显示（）；
如果其他{存在
Tabs.setActiveTab（TAB）； / /主动
}
}
}，

结果图：
结论：ExtJS效果很耀眼，但它很难学。特别是在比较新的版本，这是很难找到什么好的教程，我们的API是很好的，我们可以在API的例子，多练习，这样我们就可以很快地掌握它。我最近一直在接触ExtJS。我希望你不想吐口水！