本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335

官方例子:http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune

本文作者:sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

做一个系统的话,一般都需要有导航栏啊,工具条啊这些东西。看到Ext官方例子中有个window的layout window ,看了下效果看起来蛮不错,就学习了下,加入到了我之前做的extjs5登录系统中。这样看起来就像是一个系统了。

先看下官方例子的效果吧,看起来很不错的哟:

看下官方给的代码:

代码地址:http://dev.sencha.com/ext/5.0.1/examples/window/layout.js

代码内容:

Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function(){
var win,
button = Ext.get('show-btn'); button.on('click', function(){ if (!win) {
win = Ext.create('widget.window', {
title: 'Layout Window with title <em>after</em> tools',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
maximizable: true,
animateTarget: button,
width: 600,
minWidth: 350,
height: 350,
tools: [{type: 'pin'}],
layout: {
type: 'border',
padding: 5
},
items: [{
region: 'west',
title: 'Navigation',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
// LTR even when example is RTL so that the code can be read
rtl: false,
title: 'Bogus Tab',
html: '<p>Window configured with:</p><pre style="margin-left:20px"><code>header: {\n titlePosition: 2,\n titleAlign: "center"\n},\nmaximizable: true,\ntools: [{type: "pin"}],\nclosable: true</code></pre>'
}, {
title: 'Another Tab',
html: 'Hello world 2'
}, {
title: 'Closable Tab',
html: 'Hello world 3',
closable: true
}]
}]
});
}
button.dom.disabled = true;
if (win.isVisible()) {
win.hide(this, function() {
button.dom.disabled = false;
});
} else {
win.show(this, function() {
button.dom.disabled = false;
});
}
});
});

现在看看我的最后成果:

看起来是不是跟官方的差不多呀,哈哈。这就是模仿咯,能知道如何看官方的例子了,感觉就来啦,可以顺利上手的样子了。

哈哈。

看看需要做哪些就可以达到如上效果吧!

1.增加菜单项的内容,就是 学生档案、教室档案那些,这个我们暂时放在mainmodel下的data里面,这个自己制定,可以直接在panel的items定死也是可以的,这里动态获取一下。

/**
* 应用程序主要视图.author: sushengmiyan
*blog: http://blog.csdn.net/column/details/sushengextjs5.html
*/
Ext.define('oaSystem.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
//数据模块 ViewModel中的data可以在指定当前ViewModel的地方获取
data: {
name: 'oaSystem',
// 左边菜单的加载
NavigationMenu : [{
text : '档案管理',// 菜单项的名称
description : '', // 菜单项的描述
expanded : true,// 在树形菜单中是否展开
items : [{
text : '学生档案',// 菜单条的名称
module : 'StudentArchives',// 对应模块的名称
glyph : 0xf00b // 菜单条的图标字体
},{
text : '教师档案',
module : 'TeacherArchives',
glyph : 0xf1a2
},{
text : '教室资源',
module : 'RoomArchives',
glyph : 0xf183
}]
},{
text : '系统设置',
description : '',
items : [{
text : '系统参数',
module : 'SytemInfo',
glyph : 0xf0f7
}, {
text : '高级设置',
module : 'HigherSetting',
glyph : 0xf02e
}]
} ]
}, //增加 data, formulas and/or methods 来支持你的视图
});

在regions目录下新建Left.js内容如下:

Ext.define(
//左侧导航条
'oaSystem.view.main.region.Left',
{
extend: 'Ext.panel.Panel',
alias: 'widget.mainleft',
title: '折叠菜单',
glyph: 0xf0c9,
split: true,
collapsible: true,
floatable: false,
tools: [{type: 'pin'}],
header: {
titlePosition: 2,
titleAlign: 'center'
},
maximizable: true,
layout: {
type: 'accordion',
animate: true, //点击的时候有动画动作
titleCollapse: true,
enableSplitters: true,
hideCollapseTool: true,
}, viewModel: 'main', //指定后可获取MainModel中data数据块 initComponent: function() {
this.items = [];
var menus = this.getViewModel().get('NavigationMenu');
for (var i in menus) {
//先获取分组显示
var group = menus[i];
var leftpanel = {
menuAccordion : true,
xtype: 'panel',
title: group.text,
bodyStyle: {
padding: '10px'
},
layout: 'fit',
dockedItems: [{
dock : 'left',
xtype : 'toolbar',
items : []
}],
glyph: group.glyph
};
//遍历分组下的菜单项
for (var j in group.items) {
var menumodule = group.items[j];
leftpanel.dockedItems[0].items.push({
text: menumodule.text,
glyph: menumodule.glyph,
handler: 'onMainMenuClick'
});
}
this.items.push(leftpanel);
}
this.callParent(arguments);
},
} );

在main.js中引入这个单元:

uses:['oaSystem.view.main.region.Top', 'oaSystem.view.main.region.Bottom','oaSystem.view.main.region.Left'],

在items中增加这个折叠导航:

,{
xtype : 'mainleft',
region : 'west', // 左边面板
width : 250,
split : true
}

OK,完工。现在就可以有个折叠导航啦

[ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏的更多相关文章

  1. [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/41242993 本文作者:sushengmiyan ------------------ ...

  2. [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word =&gt; debugger;)

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/41242993 本文作者:sushengmiyan ------------------ ...

  3. [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...

  4. [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...

  5. [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...

  6. [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan ------------------ ...

  7. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  8. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  9. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

随机推荐

  1. 【NOIP2016】天天爱跑步

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.«天天爱跑步»是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵包含 个结点 ...

  2. POJ 3233 (矩阵)

    题意:对于矩阵A,求A^1 + ...... + A^k 按照矩阵十大经典题的思路大致做了下. 在k为奇数时:  A^( k / 2+1)+ 1) * (A^1 + ....... A^(k/2)) ...

  3. hdu 3954 线段树 (标记)

    Level up Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. SPOJ VLATTICE(莫比乌斯反演)

    题意: 在一个三维空间中,已知(0,0,0)和(n,n,n),求从原点可以看见多少个点 思路: 如果要能看见,即两点之间没有点,所以gcd(a,b,c) = 1         /*来自kuangbi ...

  5. JVM程序计数器

    一.先来看看概念 多线程的Java应用程序:为了让每个线程正常工作就提出了程序计数器(Programe Counter Register),每个线程都有自己的程序计数器这样当线程执行切换的时候就可以在 ...

  6. Mysql锁机制--乐观锁 & 悲观锁

    Mysql 系列文章主页 =============== 从 这篇 文章中,我们知道 Mysql 并发事务会引起更新丢失问题,解决办法是锁.所以本文将对锁(乐观锁.悲观锁)进行分析. 第一部分 悲观锁 ...

  7. [原创]手把手教你写网络爬虫(7):URL去重

    手把手教你写网络爬虫(7) 作者:拓海 摘要:从零开始写爬虫,初学者的速成指南! 封面: 本期我们来聊聊URL去重那些事儿.以前我们曾使用Python的字典来保存抓取过的URL,目的是将重复抓取的UR ...

  8. Vue.js + Webpack

    vue.js Vue.js是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 以上是Vue.js官方定义,故名思议,以数据驱动视 ...

  9. Restful中 @RequestParam,@PathParam,@PathVariable等注解区别

    @RequestParam 和 @PathVariable 注解是用于从request中接收请求的,两个都可以接收参数,关键点不同的是@RequestParam 是从request里面拿取值,而 @P ...

  10. Mac下安装PEAR

    The following instructions install PEAR and PECL on Mac OS X under/usr/local/. PECL is bundled with ...