没有合适的资源?快使用搜索试试~ 我知道了~
Extjs4MVC后台管理程序实现.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 28 浏览量
2021-11-04
19:18:41
上传
评论
收藏 294KB PDF 举报
温馨提示
试读
19页
Extjs4MVC后台管理程序实现.pdf
资源详情
资源评论
资源推荐
Extjs4--- 用 MVC做的后台管理系统 之一
2012-09-25 14:20:18 我来说两句 作者: lc448986375
收藏 我要投稿
最近自学的 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'
}
剩余18页未读,继续阅读
筱筱笎琞
- 粉丝: 8
- 资源: 15万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0