Ext MVC 三层详解:
// 程序入口 -- app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({ //开启自动加载功能
enabled:true
});
Ext.application({
name:'AM', //自定义命名空间,通常都定义为AM
appFolder:'app', //配置Ext框架所在的文件目录
launch:function(){ //在所有资源都载入成功后运行
Ext.create('Ext.container.Viewport',{
items:{
width:1500,
height:500,
xtype:'mainlayout' //这里引用了自定义的组件mainlayout(视图层的MainLayout的别称)
}
});
},
controllers:[ //加载所有的控制器
'UserController'
]
});
});
// 控制层 UserController.js
Ext.define('AM.controller.UserController',{
extend:'Ext.app.Controller', //继承Ext.app.Controller类
init:function(){
this.control({ //控制事件处理
'userlist button[id=add]':{
click:function(){
//do something
}
}
});
},
views:[
'UserList', //放在MainLayout之前加载
'DeptList',
'MainLayout'
],
stores:[
'UserStore',
'DeptStore'
],
models:[
'UserModel'
]
});
// Model层 UserModel.js
Ext.define('AM.model.UserModel',{
extend:'Ext.data.Model', //用来绑定到grid表字段
fields:[
{name:'id',type:'string'},
{name:'name',type:'auto'},
{name:'password',type:'string'},
{name:'birth',type:'auto'},
{name:'email',type:'auto'},
{name:'intro',type:'string'}
]
});
// Store层:UserStore.js
Ext.define('AM.store.UserStore',{
extend:'Ext.data.Store',
model:'AM.model.UserModel',
proxy:{
type:'ajax',
url:'/ExtjsTest/test/readuser',
reader:{
type:'json',
root:'userinfo'
},
writer:{
type:'json'
}
},
autoLoad:true
});
// 视图层
Ext.define('AM.view.UserList',{
extend:'Ext.grid.Panel', //GridPanel组件
alias:'widget.userlist', //别名
// title:'用户信息',
width:500,
height:500,
store:'UserStore', //绑定UserStore数据集
selModel:{
selType:'checkboxmodel'
},
tbar:[{text:"添加",id:'add'},{text:'删除',id:'del'},{text:'保存',id:'save'}], //按钮事件在控制层写
columns:[{header:'编号',dataIndex:'id',field:{xtype:'textfield',allowBlank:false}},
{header:'姓名',dataIndex:'name',field:{xtype:'textfield',allowBlank:false}},
{header:'密码',dataIndex:'password',field:{xtype:'textfield',allowBlank:false}},
{header:'生日',dataIndex:'birth',field:{xtype:'datefield',allowBlank:false}},
{header:'邮件',dataIndex:'email',field:{xtype:'textfield',allowBlank:false}},
{header:'简介',dataIndex:'intro',field:{xtype:'textfield',allowBlank:false}}],
]
});
分享到:
相关推荐
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs-theme-bootstrap-master.zip
extjs-basex.js extjs-basex.js extjs-basex.js
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
extjs-6.2.0完全离线版本API文档,原本的离线包还是会去请求谷歌的部分js资源和字体资源,导致速度很慢,这个不会了
extjs-4.2.1的基础包.rar,方便自己用.
extjs-4.1.1 ExtJs所有文档及库文件,在官网下的,这个版本很好,放在这方便大家下载!
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
extjs-basex.js extjs-basex.js extjs-basex.js
Vs2005+Access+Asp.net+Extjs简单三层架构源码 由51编程网站提供,代码由51编程-代码器自动生成。 共生成5种文件格式: Model: 实体层 BLL : 逻辑层 Dal: 数据层(主键自动增长,新增时都需要屏蔽) Ext.aspx: ...
ExtJs-4.1.1a-gpl+中午手册+入门教程
extjs--创建图表 折线图、饼状图、柱状图
ExtJS----HelloWorld程序源码
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列...
extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版
extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
extjs-7.0.0-gpl