Extjs4 MVC 后台管理程序实现.docx
- 文档编号:3294941
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:23
- 大小:468.25KB
Extjs4 MVC 后台管理程序实现.docx
《Extjs4 MVC 后台管理程序实现.docx》由会员分享,可在线阅读,更多相关《Extjs4 MVC 后台管理程序实现.docx(23页珍藏版)》请在冰豆网上搜索。
Extjs4MVC后台管理程序实现
Extjs4---用MVC做的后台管理系统之一
2012-09-2514:
20:
18 我来说两句 作者:
lc448986375
收藏
我要投稿
最近自学的Extjs4,今天试着用MVC做了个类似后台管理系统的界面,正在逐步完善中,有做的不好的地方希望能提出建议,
完整代码我会在完全做完之后传上
首先建立相应的文件目录如下
controller:
放控制器的文件夹
model:
放模型类/实体类,这里暂时没有用到
store:
存放数据的,暂时为用到
view:
放视图类的
建完目录结构,接下来建立首页:
index.html:
[html]
DOCTYPEhtml>
然后建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('Thepanelwasrendered');
}
}
);
接下来建立四个view:
顶部Top.js:
[javascript]
Ext.define('HT.view.Top',{
extend:
'Ext.Component',
alias:
'widget.top',//注意不要忘了写“widget”否则会找不到并且报错 rgb(0,0,0);text-decoration: none;font-family: 'MicrosoftYaHei';line-height: 30px;"> 10px;">UncaughtTypeError: Cannotcallmethod'substring'ofundefined 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); } } ) 运行效果如下: Extjs4---用MVC做的后台管理系统之二 做了下修改,刚才发的时候没有建立store,model 在上一个版本的基础上添加了一点功能,点击左边的Button按钮可以在右边添加新的tab,在tab加了页面,和grid,复习了一下以前学的东西 看代码: index.html,app.js没有修改,这应该就是MVC的优点吧,这里只贴出修改的代码: 在左边的导航栏添加了两个按钮: Accordion.js: [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: '首页设置', items: [ { xtype: 'button', width: 150, id: 'homePageSet', text: '首页管理' },{ xtype: 'button', width: 150, id: 'adminSet', text: '管理员管理' } ] },{ title: '导航栏设置', html: '导航栏' },{ title: '文章设置', html: '文章设置' },{ title: '留言设置', html: '留言' } ] }); 建立model层的User.js: [javascript] Ext.define('HT.model.User', { //不要忘了继承 extend: 'Ext.data.Model', fields: [ {name: 'id',mapping: 'id'}, {name: 'name',mapping: 'name'}, {name: 'sex',mapping: 'sex'}, {name: 'age',mapping: 'age'}, {name: 'birthdate',mapping: 'birthdate',type: 'date',dataFormat: 'Y-m-d'} ] } ) 建立store层的Users.js: Ext.define('HT.store.Users',{ //不要忘了继承 extend: 'Ext.data.Store', //记得设置model model: 'HT.model.User', //自动加载设为true autoLoad: true, proxy: { type: 'ajax', url: 'users', reader: { //数据格式为json type: 'json', root: 'users' } } }); 然后在view中添加了一个Grid: Grid.js: [javascript] Ext.define('HT.view.Grid',{ extend: 'Ext.grid.Panel', title: '人员列表', initComponent: function(){ Ext.apply(this,{ //width: 400, //height: 170, layout: 'fit', //frame: true, store: 'Users', columns: [//配置表格列 newExt.grid.RowNumberer(),//表格行号组件 {header: "编号",width: 80,dataIndex: 'id',sortable: true}, {header: "姓名",width: 80,dataIndex: 'name',sortable: true}, {header: "年龄",width: 80,dataIndex: 'age',sortable: true}, {header: "性别",width: 80,dataIndex: 'sex',sortable: true}, {header: "生日",width: 80,dataIndex: 'birthdate',sortable: true} ] }), this.callParent(arguments); } }); 在“首页设置”中的tab中引入了一个普通的页面: [html] DOCTYPEhtml>
--
标题 | |
域名 | |
版权信息 | |
简介 | |
|
效果图:
Extjs4---用MVC做的后台管理系统之三
[javascript]
//定义验证码控件
Ext.define('CheckCode',{
extend:
'Ext.form.field.Text',
alias:
'widget.checkcode',
inputTyle:
'codefield',
codeUrl:
Ext.BLANK_IMAGE_URL,
isLoader:
true,
onRender:
function(ct,position){
this.callParent(arguments);
this.codeEl=ct.createChild({tag:
'img',src:
Ext.BLANK_IMAGE_URL});
this.codeEl.addCls('x-form-code');
this.codeEl.on('click',this.loadCodeImg,this);
if(this.isLoader)this.loadCodeImg();
},
alignErrorIcon:
function(){
this.errorIcon.alignTo(this.codeEl,'tl-tr',[2,0]);
},
//如果浏览器发现url不变,就认为图片没有改变,就会使用缓存中的图片,而不是重新向服务器请求,所以需要加一个参数,改变url
loadCodeImg:
function(){
this.codeEl.set({src:
this.codeUrl+'?
id='+Math.random()});
}
});
Ext.onReady(
function(){
varcheckcode=Ext.create('CheckCode',{
cls:
'key',
fieldLabel:
'验证码',
name:
'CheckCode',
id:
'CheckCode',
allowBlank:
false,
isLoader:
true,
blankText:
'验证码不能为空',
codeUrl:
'getCode',
width:
150
});
varform=Ext.create(
'Ext.form.Panel',
{
frame:
true,
title:
'用户登录'
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs4 MVC 后台管理程序实现 后台 管理程序 实现
![提示](https://static.bdocx.com/images/bang_tan.gif)