Extjs4.1MVC详解
来源:互联网 发布:数据库实训 编辑:程序博客网 时间:2024/05/22 05:20
更多信息请移步:http://xiebaochun.github.io/
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.store.DeptStore',{
- extend:'Ext.data.TreeStore',
- defautRootId:'root',
- proxy:{
- type:'ajax',
- url:'/ExtjsTest/test/showuser',
- reader:{
- type:'json'
- },
- writer:{
- type:'json'
- }
- },
- autoLoad:true
- });
UserList.js
- 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}}],
- ]
- });
- Ext.define('AM.view.DeptList',{
- extend:'Ext.tree.Panel', //TreePanel组件
- alias:'widget.deptlist',
- // title:'树',
- width:300,
- height:500,
- rootVisible:false,
- dockedItems:[{
- xtype:'toolbar',
- dock:'left',
- items:[
- {xtype:'button',text:'add',id:'add'},
- {xtype:'button',text:'delete',id:'del'},
- {xtype:'button',text:'copy',id:'copy'}
- ]
- },
- store:'DeptStore', //绑定DeptStore数据集
- }
- });
0 0
- Extjs4.1MVC详解
- Extjs4.1MVC详解
- ExtJs4.1布局详解
- ExtJs4.1布局详解
- EXTJS4.1MVC单表维护
- 体验 EXTJS4 的 MVC
- Extjs4.0 MVC实例
- EXTJS4.0 MVC 解析
- EXTJS4 MVC框架
- EXTJS4 MVC模式笔记
- ExtJs4 与MVC
- ExtJS4.2 MVC
- EXTJS4 MVC框架
- ExtJs4 MVC学习
- Extjs4.2 MVC框架
- Extjs4-----布局 layout 详解1-accordion(折叠)
- Extjs4.1 - Ext.util工具包详解
- Extjs4.1API解读之误导篇(MVC)
- Extjs4.10Model模型详解
- Android应用开机自启动失败原因
- uva 10622 - Perfect P-th Powers(数论)
- 将具有关联关系的两个表通过hibernate从数据库中查出来后转成Json对象时报错解决
- C++ 容器的用法
- Extjs4.1MVC详解
- ExtJs4.1布局详解
- 跟我一起学extjs5(09--自定义菜单2)
- 在适配器中,何时调用getView()方法?
- html favorite 添加
- svn Can't revert without reverting children 解决方案
- 慢慢来,静下心!
- ajax版的 精简的三级联动
- 【自动语音识别课程】第二课 语音信号分析