javascript代码实例教程-Extjs4.1MVC详解
发布时间:2019-01-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Extjs4.1MVC详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
app.js
[javascript] view pl
aincopy
PRint?
- 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
[javascript] view plaincopyprint? - 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
[javascript] view plaincopyprint? - 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
[javascript] view plaincopyprint? - 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
- }); DeptStore.js
[javascript] view plaincopyprint? - 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
[javascript] view plaincopyprint? - 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}}],
- ]
- }); DeptList.js
[javascript] view plaincopyprint? - 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数据集
- }
- }); 效果图:
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-Extjs4.1MVC详解全部内容,希望文章能够帮你解决javascript代码实例教程-Extjs4.1MVC详解所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。