最近在公司接触到了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',{
id:'treePanel',
rootVisible