Extjs-Extjs入门三层架构搭建
程序员文章站
2022-04-30 19:27:30
...
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}}], ] });
上一篇: C#基础(1)
下一篇: 提高微博营销效率的好方法:抢话题主持人