javascript代码实例教程-Extjs4.1MVC详解

发布时间:2019-01-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Extjs4.1MVC详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

app.js

[javascript] view plaincopyPRint?
  1. Ext.onReady(function(){
  2. Ext.QuickTips.inIT();
  3. Ext.Loader.setconfig({ //开启自动加载功能
  4. enabled:true
  5. });
  6. Ext.application({
  7. name:'AM', //自定义命名空间,通常都定义为AM
  8. appFolder:'app', //配置Ext框架所在的文件目录
  9. launch:function(){ //在所有资载入成功后运行
  10. Ext.create('Ext.container.Viewport',{
  11. items:{
  12. width:1500,
  13. height:500,
  14. xtyPE:'mainlayout' //这里引用了自定义的组件mainlayout(视图层的MainLayout的别称)
  15. }
  16. });
  17. },
  18. controllers:[ //加载所有的控制器
  19. 'UserController'
  20. ]
  21. });
  22. }); 控制层:

    UserController.js

    [javascript] view plaincopyprint?
    1. Ext.define('AM.controller.UserController',{
    2. extend:'Ext.app.Controller',//继承Ext.app.Controller类
    3. init:function(){
    4. this.control({ //控制事件处理
    5. 'userlist button[id=add]':{
    6. click:function(){
    7. //do something
    8. }
    9. }
    10. });
    11. },
    12. views:[
    13. 'UserList', //放在MainLayout之前加载
    14. 'DeptList',
    15. 'MainLayout'
    16. ],
    17. Stores:[
    18. 'UserStore',
    19. 'DeptStore'
    20. ],
    21. models:[
    22. 'UserModel'
    23. ]
    24. });

      Model层:

      UserModel.js

      [javascript] view plaincopyprint?
      1. Ext.define('AM.model.UserModel',{
      2. extend:'Ext.data.Model', //用来绑定到grid表字段
      3. fields:[
      4. {name:'id',type:'string'},
      5. {name:'name',type:'auto'},
      6. {name:'password',type:'string'},
      7. {name:'birth',type:'auto'},
      8. {name:'email',type:'auto'},
      9. {name:'intro',type:'string'}
      10. ]
      11. });

        Store层:

        UserStore.js

        [javascript] view plaincopyprint?
        1. Ext.define('AM.store.UserStore',{
        2. extend:'Ext.data.Store',
        3. model:'AM.model.UserModel',
        4. Proxy:{
        5. type:'ajax',
        6. url:'/Extjstest/test/readuser',
        7. reader:{
        8. type:'json',
        9. root:'userinfo'
        10. },
        11. writer:{
        12. type:'json'
        13. }
        14. },
        15. autoLoad:true
        16. }); DeptStore.js

          [javascript] view plaincopyprint?
          1. Ext.define('AM.store.DeptStore',{
          2. extend:'Ext.data.TreeStore',
          3. defautRootId:'root',
          4. proxy:{
          5. type:'ajax',
          6. url:'/ExtjsTest/test/showuser',
          7. reader:{
          8. type:'json'
          9. },
          10. writer:{
          11. type:'json'
          12. }
          13. },
          14. autoLoad:true
          15. }); 视图层:

            UserList.js

            [javascript] view plaincopyprint?
            1. Ext.define('AM.view.UserList',{
            2. extend:'Ext.grid.Panel', //GridPanel组件
            3. alias:'widget.userlist', //别名
            4. // title:'用户信息',
            5. width:500,
            6. height:500,
            7. store:'UserStore', //绑定UserStore数据集
            8. selModel:{
            9. selType:'checkboXModel'
            10. },
            11. tbar:[{text:"添加",id:'add'},{text:'删除',id:'del'},{text:'保存',id:'save'}], //按钮事件在控制层写
            12. columns:[{header:'编号',dataIndex:'id',field:{xtype:'textfield',allowBlank:false}},
            13. {header:'姓名',dataIndex:'name',field:{xtype:'textfield',allowBlank:false}},
            14. {header:'密码',dataIndex:'password',field:{xtype:'textfield',allowBlank:false}},
            15. {header:'生日',dataIndex:'birth',field:{xtype:'datefield',allowBlank:false}},
            16. {header:'邮件',dataIndex:'email',field:{xtype:'textfield',allowBlank:false}},
            17. {header:'简介',dataIndex:'intro',field:{xtype:'textfield',allowBlank:false}}],
            18. ]
            19. }); DeptList.js

              [javascript] view plaincopyprint?
              1. Ext.define('AM.view.DeptList',{
              2. extend:'Ext.tree.Panel', //TreePanel组件
              3. alias:'widget.deptlist',
              4. // title:'树',
              5. width:300,
              6. height:500,
              7. rootVisible:false,
              8. dockedItems:[{
              9. xtype:'toolbar',
              10. dock:'left',
              11. items:[
              12. {xtype:'button',text:'add',id:'add'},
              13. {xtype:'button',text:'delete',id:'del'},
              14. {xtype:'button',text:'copy',id:'copy'}
              15. ]
              16. },
              17. store:'DeptStore', //绑定DeptStore数据集
              18. }
              19. }); 效果图:

                javascript代码实例教程-Extjs4.1MVC详解



                觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

                脚本宝典总结

                以上是脚本宝典为你收集整理的javascript代码实例教程-Extjs4.1MVC详解全部内容,希望文章能够帮你解决javascript代码实例教程-Extjs4.1MVC详解所遇到的问题。

                如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

                本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
                如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。