Extjs的页面布局及树节点的联动

最近在公司接触到了Extjs这个框架，学的真是头发稀脑袋大呀！下面带来在学习中自己写的一个实例。

此例子是用6的版本所写。大家参考的时候注意哦！因为Extjs版本之间的个别方法属性有着细微差别。

Extjs

在这之前简短说一下这个框架的优缺点吧。
优点：相关js封装的很好，界面很简洁，对于兴起的那一段时间来说美观程度也是很好的。多数用于系统管理系统
缺点：页面加载过慢，重量级框架（底层你会发现很多div，看的真是头皮发麻）。学习成本较高，不像学习EasyUI，学习几个API就可以了。此外现在很少会用这个框架，前端三大主流框架是最多的，而其中又属vue最火，使用最多。

使用的时候不要忘记导入Extjs本身的框架文件

实例

工具：IDEA
框架：ssm+Extjs
PS：主要针对于Extjs
实现：简单管理系统的布局，树节点与tabpanel的联动
效果：

我们可以从图中看出整个页面的布局分为上下两部分，而下部分又分为了左右两部分。这里我用了Extjs中的border布局方式，三块布局分别是北，西和中心。北侧我不多说就是一个标题，西侧是一个树结构，中心区域是一个tabpanel。点击树的相关节点tabpanel弹出相应的页面，这种布局很常见的一种。

相关代码：

Ext.onReady(function () {
   
		   // Ext.QuickTips.init();
		   
		   //中心区域：tabpanel
		   var centerTab = Ext.create('Ext.TabPanel',{
   
		      id:'centerTab',
		      region:'center',
		      margin:10,
		      enableTabScroll:true,
		      deferredRender:false,
		      bodyStyle:'background-color:gray;background-image: url(' + webroot + 'img/main.png) !important;background-size: 317px 466px;background-repeat: no-repeat;background-position:center'
		   })
		
		//树结构
		   var treePanel = Ext.create('Ext.tree.TreePanel',{