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>
setHomePage.html
---->
效果图：
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:
'用户登录'
升级会员 