Extjs4---用MVC做的后台管理系统 之一
最近自学的Extjs4，今天试着用MVC做了个类似后台管理系统的界面，正在逐步完善中，有做的不好的地方希望能提出建议，
完整代码我会在完全做完之后传上
首先建立相应的文件目录如下
controller：放控制器的文件夹
model：放模型类/实体类，这里暂时没有用到
store：存放数据的，暂时为用到
view：放视图类的
建完目录结构，接下来建立首页：index.html:
[html]
<!DOCTYPE html>
<html>
<head>
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
然后建app.js：
[javascript]
Ext.Loader.setConfig({enabled:true});//必须加这句，否则会报错
Ext.application({
//定义命名控件
name:'HT',
//定义文件夹
appFolder:'app',
//添加控制器
controllers:['Controllers'],
//页面完全加载后将运行此方法
launch:function() {
Ext.create('Ext.container.Viewport', {
//布局方式
layout:'border',
items: [{
xtype:'top'//这里可以写对应view的alias的属性
},{
xtype:'accordion'
},{
xtype:'center'
},{
xtype:'bottom'
}
]
});
}
}
);
接下来建控制器Controller.js:
[javascript]
Ext.define('HT.controller.Controllers',{//定义类
extend:'Ext.app.Controller',//一定要继承Controller
//添加views，让控制器找到
views:[
'Accordion',
'Center',
'Top',
'Bottom'
],
//自动调用此方法
init:function(){
console.log('The panel was rendered');
}
}
);
接下来建立四个view：
顶部Top.js:
[javascript]
Ext.define('HT.view.Top',{
extend:'Ext.Component',
alias:'widget.top',//注意不要忘了写“widget”否则会找不到并且报错<a href="http://blog.csdn.net/lc448986375/article/details/8014401" style="color: rgb(0, 0, 0); text-decoration: none; font-family: 'Microsoft YaHei'; line-height: 30px; "><span style="font-size:10px;">Uncaught TypeError: Cannot call method 'substring' of undefined</span></a>
padding: 10,
html:'欢迎使用',
region:'north'
});
底部Bottom.js:
[javascript]
Ext.define('HT.view.Bottom',{
extend:'Ext.Component',
padding: 10,
alias:'widget.bottom',
html:'版权所有 欢迎使用',
region:'south'
});
左侧的导航栏：Accordion.js,采用布局方式问accordion
[javascript]
Ext.define('HT.view.Accordion',{
extend:'Ext.panel.Panel',
title:'系统设置',
alias:'widget.accordion',
//是否可以折叠
collapsible: true,
//是否可以通过拖动改变宽度
split:true,
width:200,
//布局方式
layout:'accordion',
region:'west',
layoutConfig: {
titleCollapse: true, //设置为点击整个标题栏都可以收缩
animate: true, //开启默认动画效果
activeOnTop: true //展开的面板总是在最顶层
},
items:[
{
title:'首页设置',
html:'设置首页'
},{
title:'导航栏设置',
html:'导航栏'
},{
title:'文章设置',
html:'文章设置'
},{
title:'留言设置',
html:'留言'
}
]
});
中间用的tabpanel,Center.js:
[javascript]
Ext.define('HT.view.Center',{
extend:'Ext.tab.Panel',
//layout:'fit',
//注意 加上widget.
alias:'widget.center',
region:'center',
activeTab:0,
items:[
{
title:'主页',
html:'欢迎使用后台管理系统 版本1.0'
}
],
initComponent:function(){
this.callParent(arguments);
}
}
)
运行效果如下：
