Ext4.1 Grid 分页查询

转载:http://blog.csdn.net/zyujie/article/details/16362747

 

最近用Ext4.1自己做了做项目的练习:把一些知识点,在这里记录下来了!

上面一个form表单,用作添加用户信息,包含了一些验证技巧。下面是一个带查询参数的分页Grid。

[javascript]   view plain copy 在CODE上查看代码片
  1. /**预加载的组件**/  
  2. Ext.require([  
  3.     'Ext.grid.*',  
  4.     'Ext.data.*',  
  5.     'Ext.util.*',  
  6.     'Ext.toolbar.Paging',  
  7.     'Ext.ModelManager',  
  8.     'Ext.tip.QuickTipManager',  
  9.     'Ext.layout.container.Border'  
  10. ]);  
  11.   
  12. Ext.onReady(function(){  
  13.   
  14.     Ext.Ajax.timeout = 60000; // 60秒  
  15.       
  16.     var pageSize = 10;  
  17.       
  18.     //自定义正则表达式验证  
  19.     Ext.apply(Ext.form.VTypes,{  
  20.         phonecheck : function(val) {  
  21.             return /(^[1][358][0-9]{9}$)/.test(val);  
  22.         },  
  23.         phonecheckText : "号码不匹配!"  
  24.     },{  
  25.         usercheck : function(val) {  
  26.             //var reg = /(^[1][358][0-9]{9}$)/;  
  27.             //if(reg.test(val)==false){  
  28.             //  return false;  
  29.             //}  
  30.             return /^[a-z]+$/.test(val);  
  31.         },  
  32.         usercheckText : "格式不正确,只接受小写字母!"  
  33.     });  
  34.       
  35.     var form = Ext.create('Ext.form.Panel', {  
  36.         id:'userForm',  
  37.         title:'添加系统用户',  
  38.         layout: 'column',  
  39.         defaultType: 'textfield',  
  40.         width: '100%',  
  41.         height: 140,  
  42.         bodyStyle: 'padding:5px',  
  43.         animCollapse:true,  
  44.         region : 'north',  
  45.         collapsible:true,  
  46.         border: true,  
  47.         frame: true,  
  48.         plan: true,  
  49.         items: [{  
  50.             columnWidth: .3,  
  51.             id:'userId',  
  52.             name:'userId',  
  53.             fieldLabel: '用户编号',  
  54.             fieldWidth: 30,  
  55.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  56.             blankText: '请输入用户编号',  
  57.             allowBlank: false,  
  58.             maxLength:18,  
  59.             minLength:5,  
  60.             vtype:'usercheck'  
  61.         },{  
  62.             id:'userName',  
  63.             name:'userName',  
  64.             fieldLabel: '用户姓名',  
  65.             fieldWidth: 30,  
  66.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  67.             blankText: '请输入用户名',  
  68.             allowBlank: false,  
  69.             maxLength:18,  
  70.             minLength:5,  
  71.             columnWidth: .3  
  72.         },{  
  73.             id:'password',  
  74.             name:'password',  
  75.             fieldLabel: '密码',  
  76.             fieldWidth: 30,  
  77.             inputType:'password',  
  78.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  79.             blankText: '请输入密码',  
  80.             allowBlank: false,  
  81.             columnWidth: .3  
  82.         },{  
  83.             id:'userMail',  
  84.             name:'userMail',  
  85.             fieldLabel: '电子邮箱',  
  86.             fieldWidth: 30,  
  87.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  88.             blankText: '请输入电子邮箱',  
  89.             allowBlank: false,  
  90.             vtype: 'email',  
  91.             style: {  
  92.                 marginTop: '10px'  
  93.             },  
  94.             columnWidth: .3  
  95.         },{  
  96.             id:'phoneno',  
  97.             name:'phoneno',  
  98.             fieldLabel: '手机号',  
  99.             fieldWidth: 30,  
  100.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  101.             blankText: '请输入手机号',  
  102.             allowBlank: false,  
  103.             vtype:'phonecheck',  
  104.             style: {  
  105.                 marginTop: '10px'  
  106.             },  
  107.             columnWidth: .3  
  108.         },{  
  109.             id:'remark',  
  110.             name:'remark',  
  111.             fieldLabel: '备注信息',  
  112.             fieldWidth: 30,  
  113.             labelStyle : "text-align:right;width:30;padding-right:10px;",  
  114.             blankText: '请输入备注信息',  
  115.             allowBlank: true,  
  116.             style: {  
  117.                 marginTop: '10px'  
  118.             },  
  119.             columnWidth: .3  
  120.         }],  
  121.         buttons: ['->', {  
  122.             text: '添加用户',  
  123.             iconCls: 'icon-add',  
  124.             formBind: true,  
  125.             handler:function(){  
  126.                 var form = Ext.getCmp('userForm').getForm();  
  127.                 if(form.isValid()){  
  128.                     form.submit({  
  129.                         url: '/mymis/system/userinfo/addUserInfo.action',  
  130.                         method:'post',  
  131.                         waitTitle: "请稍候",    
  132.                         waitMsg : '提交数据,请稍候...',   
  133.                         success: function(form, action) {  
  134.                             Ext.Msg.alert('Success''保存成功!');  
  135.                             var flag = action.result.reason;  
  136.                             if(flag == "exists"){  
  137.                                 Ext.Msg.alert('警告''系统中已存该用户编号,请重新输入!');  
  138.                             }else{  
  139.                                 Ext.Msg.alert('提示''用户信息成功添加!');  
  140.                                 var grid = Ext.getCmp("myGrid");  
  141.                                 var store = grid.getStore();  
  142.                                 store.load({ params: { start: 0, limit: pageSize} });  
  143.                                 grid.reconfigure();  
  144.                             }  
  145.                         },  
  146.                         failure: function(form, action) {  
  147.                             Ext.Msg.alert('错误''用户信息添加失败,请联系管理员!');  
  148.                         }  
  149.                     });  
  150.                 }  
  151.             }  
  152.         },'-',{  
  153.             text: '重  置',  
  154.             iconCls: 'icon-reset',  
  155.             handler:function(){  
  156.                 Ext.getCmp('userForm').getForm().reset();  
  157.             }  
  158.         }]  
  159.     });  
  160.       
  161.     /**grid**/  
  162.     Ext.define('MsgList', {  
  163.         extend: 'Ext.data.Model',  
  164.         fields: [  
  165.             {name: 'USER_ID',  type: 'string'},  
  166.             {name: 'USER_NAME',  type: 'string'},  
  167.             {name: 'USER_MAIL',  type: 'string'},  
  168.             {name: 'PHONE_NO',  type: 'string'}  
  169.         ],  
  170.     });  
  171.       
  172.     var myStore = Ext.create('Ext.data.Store', {  
  173.         id:'myStore',  
  174.         model: 'MsgList',  
  175.         pageSize:pageSize,  
  176.         autoLoad: true,  
  177.         remoteSort: true,  
  178.         proxy: {  
  179.             type: 'ajax',  
  180.             url : '/mymis/system/userinfo/queryUserInfo.action',  
  181.             reader: {  
  182.                 type: 'json',  
  183.                 root: 'rows',  
  184.                 totalProperty: 'total'  
  185.             },  
  186.             simpleSortMode: true  
  187.         },  
  188.     });  
  189.       
  190.     var titleBar = Ext.create('Ext.toolbar.Toolbar', {  
  191.         renderTo: Ext.getBody(),  
  192.         width : 600,  
  193.         layout: {  
  194.             overflowHandler: 'Menu'  
  195.         },  
  196.         items: [{  
  197.             xtype:'textfield',  
  198.             id:'searchMsg',  
  199.             name: 'searchMsg',  
  200.             fieldLabel: '请输入查询条件',  
  201.             allowBlank: true  
  202.         },'-',{  
  203.             xtype:'button',  
  204.             text:'查询',  
  205.             iconCls: 'icon-search-form',  
  206.             handler: function(){  
  207.                 var txtSearch = Ext.String.trim(Ext.getCmp("searchMsg").getValue());  
  208.                 var grid = Ext.getCmp("myGrid");  
  209.                 var store = grid.getStore();  
  210.                 //var pagingTB = Ext.getCmp("pagingBT");  
  211.                 store.load({ params: { start: 0, limit: pageSize,searchMsg: txtSearch} });  
  212.                 grid.reconfigure();  
  213.                 //alert(pagingTB);  
  214.                 //pagingTB.doRefresh();  
  215.             }  
  216.         }]  
  217.     });  
  218.       
  219.     var grid = Ext.create('Ext.grid.Panel', {  
  220.         id:'myGrid',  
  221.         tbar:titleBar,  
  222.         store: myStore,  
  223.         frame: true,  
  224.         region:'center',  
  225.         border: true,  
  226.         split: true,  
  227.         loadMask:{msg:"数据加载中,请稍等..."},  
  228.         //collapsible: true,  
  229.         //autoHeight : true,  
  230.         columns: [  
  231.             { header: '编号', dataIndex: 'USER_ID', flex: 2 },  
  232.             { header: '姓名', dataIndex: 'USER_NAME', flex: 6 },  
  233.             { header: '邮箱', dataIndex: 'USER_MAIL', flex: 3 },  
  234.             { header: '手机号', dataIndex: 'PHONE_NO', flex: 3 }  
  235.         ],  
  236.         //features: [{ftype:'grouping'}],  
  237.         width: '100%',  
  238.         height: Ext.getBody().getHeight() - 140,  
  239.         //loadMask: true,  
  240.         bbar: Ext.create('Ext.PagingToolbar', {  
  241.             id:'pagingBT',  
  242.             store: myStore,  
  243.             displayInfo: true,  
  244.             displayMsg: '显示 第 {0} - {1} 条记录 一共 {2} 条记录',  
  245.             emptyMsg: "没有一第记录显示"  
  246.         })  
  247.     });  
  248.       
  249.     Ext.create('Ext.container.Viewport',{  
  250.         layout : 'border',  
  251.         items : [form,grid]  
  252.     });  
  253.     //带自定义参数的分页  
  254.     myStore.on('beforeload'function (store, options) {    
  255.         var searchMsg = Ext.getCmp('searchMsg').getValue();  
  256.         Ext.apply(store.proxy.extraParams, {searchMsg: searchMsg});  
  257.     });  
  258.     myStore.load({ params: { start: 0, limit: pageSize} });  
  259. });  

添加用户的Form表单提交Action:

你可能感兴趣的:(grid)