【extjs】 ext5 Ext.grid.Panel 分页,搜索

最新推荐文章于 2021-08-06 00:45:04 发布
a84480766
最新推荐文章于 2021-08-06 00:45:04 发布
阅读量176
点赞数
文章标签： json javascript java ViewUI
原文链接：http://www.cnblogs.com/lonelywolfmoutain/p/5224036.html
版权
带有分页,搜索的grid.
<%@page language="java" contentType="text/html; charset=UTF-8" 
isELIgnored="false" pageEncoding="UTF-8" %>

<html>
 <head>
 
 <jsp:include page="../common/resource_classic.jsp"></jsp:include>
 <title>用户列表</title>
 <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/icon.css">
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/format.js"></script>
 </head>
 
 <body>
 
 <script type="text/javascript">
 
 /**
  * 用户类型 store
  * */
  var userTypeStore = Ext.create('Ext.data.Store', {
      fields: ['type', 'name'],
      data : [
          {"type":"1", "name":"后台用户"},
          {"type":"2", "name":"前台用户"}
      ]
  });
 
 /**
     * 搜索面板
     * */
      var panel = Ext.create('Ext.form.Panel', {
          title: '按条件搜索',
         // width: 600,
          defaultType: 'textfield',
          frame: true,
          method: 'POST',
          collapsible: true,//可折叠
         // bodyPadding: 5,
          layout: 'column',
         // margin: '0 0 10 0',
          items: [{
              fieldLabel: '用户名',
              labelWidth: 40,
              id: 'name'
          },{
              fieldLabel: '邮箱',
              labelWidth: 30,
              id: 'email'
          },{
              fieldLabel: '电话',
              labelWidth: 40,
              id: 'phone'
          },{
              fieldLabel: '用户类型',
              labelWidth: 50,
              id: 'type',
              xtype:"combo",
              editable:false,
              store:userTypeStore,
              valueField:'type',
              displayField:'name'
          }, {
              fieldLabel: '注册时间',
              labelWidth: 40,
              id: 'start',
              xtype:"datefield",
              format: 'Y-m-d',
              editable:false
          },{
              //fieldLabel: '注册时间',
              labelWidth: 40,
              id: 'end',
              xtype:"datefield",
              format: 'Y-m-d',
              editable:false
          },{
              xtype: 'button',
              text: '搜索',
              iconCls :"search",
              margin: '0 0 0 5',
              handler: function () {
                  var name = Ext.getCmp('name').getValue(); //获取文本框值
                  var email = Ext.getCmp('email').getValue();
                  var phone = Ext.getCmp('phone').getValue();
                  if (name !="" || email!="" || phone!="") {
                      userStore.load({ params: { name: name,email:email,phone:phone} });//传递参数
                  }
              }
          }],
          renderTo: Ext.getBody()
      });
 //用户数据
 var userStore=Ext.create('Ext.data.Store', {
        storeId:'userStore',
        fields:['uname', 'email', 'phone','regIp','regTime',"utype"],
        proxy: {
            type: 'ajax',
            url:'${pageContext.request.contextPath}/back/user/userList.do',
            reader: {
                // 設置 json樣式
                type: 'json',
                rootProperty:"rows", //json 数据根节点
                totalProperty:"total"//总数
            }
        },
        autoLoad: true,
        pageSize:10 //每页记录数默认25
    });
 
 userStore.on('beforeload',function(store, options){
     var name = Ext.getCmp('name').getValue(); //获取文本框值
      var email = Ext.getCmp('email').getValue();
      var phone = Ext.getCmp('phone').getValue();
     var new_params ={ name: name,email:email,phone:phone};  
     Ext.apply(store.proxy.extraParams, new_params);  
 });
 userStore.load({
     params: {
         start: 0,
         limit: 10
     }
 });
 
 var ckm=Ext.create("Ext.selection.CheckboxModel");
  Ext.onReady(function(){
    
      /**
      Grid 数据展示
      */
        Ext.create('Ext.grid.Panel', {
            title: '用户信息',
            id:'userGridPanel',
            selModel:ckm,
            store:userStore,// Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                 { text: '用户ID',  dataIndex: 'uid',align: 'center',hidden:true,sortable:false },
                { text: '用户名',  dataIndex: 'uname',align: 'center',
                     sortable:false },
                { text: '邮箱', dataIndex: 'email',align: 'center',sortable:false },
                { text: '电话', dataIndex: 'phone',align: 'center',sortable:false },
                { text: '注册IP', dataIndex: 'regIp',align: 'center',sortable:false },
                { text: '注册时间', dataIndex: 'regTime',align: 'center',scope:this,renderer:function(value){
                    var val=longToString(value,'Y-m-d H:m:s')
                    //console.info('获取的值为:{}'+value+' , '+val);
                    return  val;
                } },
                { text: '用户类型', dataIndex: 'utype',align: 'center',sortable:false,renderer:function(value){
                                    // console.info('用户类型:'+value+",类型:"+ typeof value);
                    return value==1?"后台用户":"前台用户";
                } }
            ],
          forceFit:true,//强制列表宽度自适应
           autoLoad:true,
           //工具条
            tbar: Ext.create('Ext.toolbar.Toolbar',{
                
                //width   : 500,
                items: [{
                    text: '删除',
                    xtype: 'button',
                    iconCls: 'delete',
                    id: 'user_delete',
                    handler: userInfoDel
                },{
                    text:'添加',
                    xtype:'button',
                    iconCls:'add',
                    id:'user_add',
                    handler:userInfoAdd
                },{
                    text:'修改',
                    xtype:'button',
                    iconCls:'update',
                    id:'user_update',
                    handler:userInfoUpdate
                }]
                
            }),
            renderTo: Ext.getBody(),
            //分页
            bbar: Ext.create('Ext.toolbar.Paging',{
                beforePageText:'当前第',
                afterPageText:'页',
                refreshText:'刷新',
                store:userStore,
                displayInfo:true,
                displayMsg:'显示:{0}-{1}条,总共:{2}条',
                emptyMsg:'当前查询无记录'
            })
        });
  });



 // 添加用户表单
 var   userAddForm= Ext.create('Ext.form.Panel',{
    width: 350,
    height:200,
    hidden:true,
    // 表单域 Fields 将被竖直排列, 占满整个宽度
    //  frame: true,
    layout: {
        type: 'vbox',
        align: 'middle',
        pack: 'center'
    },
    // 默认字段类型
    defaultType: 'textfield',
    items: [{
        fieldLabel: '用户名',
        name: 'name',
        allowBlank: false,
        blankText:'用户名不能为空'
    },{
        fieldLabel: '密码',
        inputType:'password',
        name: 'pwd',
        allowBlank: false,
        blankText:'密码不能为空'
    }, {
        fieldLabel: '邮箱',
            name: 'email',
        maxLength:130,
            allowBlank: false,
            blankText:'邮箱不能为空',
        vtype:"email"
        },    {
        fieldLabel: '电话',
        name: 'phone',
        allowBlank: true,
        maxLength:13
        //blankText:'密码不能为空'
    },{
        xtype:"combo",
        fieldLabel: '用户类型',
        name:'type',
        allowBlank: false,
        editable:false,
        hidden:false, //隐藏组件   默认false
        store:userTypeStore,
        valueField:'type',
        displayField:'name'
    }
    ],

    // 重置 和 保存 按钮.
    buttons: [{
        text: '重置',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: '注册',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {

            userAddWin.close();
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    // 将会通过 AJAX 请求提交到此URL
                    url: '${pageContext.request.contextPath}/back/user/reg.do',
                    success: function(form, action) {
                        Ext.Msg.alert('添加成功', action.result.restMsg);
                        Ext.getCmp('userGridPanel').getStore().reload();
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('添加失败', action.result.restMsg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});


 // 修改用户表单
 var   userUpdateForm= Ext.create('Ext.form.Panel',{
     width: 350,
     height:200,
     hidden:true,
     // 表单域 Fields 将被竖直排列, 占满整个宽度
     //  frame: true,
     layout: {
         type: 'vbox',
         align: 'middle',
         pack: 'center'
     },
     // 默认字段类型
     defaultType: 'textfield',
     items: [{
         fieldLabel: '用户名',
         name: 'uname',
         allowBlank: false,
         blankText:'用户名不能为空'
     },{
         fieldLabel: 'id',
    //     inputType:'password',
         name: 'uid'
     }, {
         fieldLabel: '邮箱',
         name: 'email',
         maxLength:130,
         allowBlank: false,
         blankText:'邮箱不能为空',
         vtype:"email"
     },    {
         fieldLabel: '电话',
         name: 'phone',
         allowBlank: true,
         maxLength:13
         //blankText:'密码不能为空'
     },{
         xtype:"combo",
         fieldLabel: '用户类型',
         name:'type',
         allowBlank: false,
         editable:false,
         hidden:false, //隐藏组件   默认false
         store:userTypeStore,
         valueField:'type',
         displayField:'name'
     }
     ],

     // 重置 和 保存 按钮.
     buttons: [{
         text: '重置',
         handler: function() {
             this.up('form').getForm().reset();
         }
     }, {
         text: '修改',
         formBind: true, //only enabled once the form is valid
         disabled: true,
         handler: function() {

             userAddWin.close();
             var form = this.up('form').getForm();
             if (form.isValid()) {
                 form.submit({
                     // 将会通过 AJAX 请求提交到此URL
                     url: '${pageContext.request.contextPath}/back/user/update.do',
                     success: function(form, action) {
                         Ext.Msg.alert('修改成功', action.result.restMsg);
                         Ext.getCmp('userGridPanel').getStore().reload();
                     },
                     failure: function(form, action) {
                         Ext.Msg.alert('修改失败', action.result.restMsg);
                     }
                 });
             }
         }
     }],
     renderTo: Ext.getBody()
 });
  //用户添加
 var userAddWin= Ext.create('Ext.window.Window', {
     title: '添加用户',
     height: 250,
     width: 400,
     closeAction: 'hide',
     layout:'form',
     items:[userAddForm]
 });

 //用户修改
 var userUpdateWin= Ext.create('Ext.window.Window', {
     title: '修改用户',
     height: 250,
     width: 400,
     closeAction: 'hide',
     layout:'form',
     items:[userUpdateForm]
 });
  
  
  //删除用户信息
  function userInfoDel(){

      var uid='';
      var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel();
      var selection = selectionModel.getSelection();
      if(selection.length==0){
          Ext.Msg.alert("提示","请选择要删除的记录!");
          return ;
      }else{
            Ext.Msg.confirm("提示","确定删除?",function(button, text){
                console.info(button+","+text);
                if(button=="yes"){
                    for(var i=0;i<selection.length;i++){
                        uid = uid+selection[i].get('uid')+",";
                    }
                    Ext.Ajax.request({
                        url: '${pageContext.request.contextPath}/back/user/delete.do',
                        params:{uid:uid},
                        /**
                         *Object {request: Object, requestId: 3, status: 200, statusText: "OK",
           *  responseText: "{"restMsg":"用户删除成功!","success":true}"…}
                         * @param response
                         * @param opts
                         */
                        success: function(response, opts) {

                            Ext.Msg.alert("信息提示","用戶信息刪除成功!");
                            Ext.getCmp('userGridPanel').getStore().reload();
                        },
                        failure: function(response, opts) {
                            Ext.Msg.alert("信息提示","刪除失敗!");
                        }
                    });
                }
            });

      }

      
  }
  
  //添加用户信息
  function userInfoAdd(){
      //
      userAddForm.reset();
     userAddForm.show();
      userAddWin.show();
  }
  
  //修改用户信息
  function userInfoUpdate(){
      
      var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel();
      var selection = selectionModel.getSelection();
      if(selection.length==0){
          Ext.Msg.alert("提示","请选择要修改的记录!");
          return ;
      }
      
      if(selection.length>1){
          Ext.Msg.alert("提示","只能修改一条记录!");
          return ;
      }
      //获取选择的记录
      var record =selectionModel.getLastSelected();
      userUpdateForm.loadRecord(record);
      
      //显示修改表单
      userUpdateForm.show();
      userUpdateWin.show();
  }
  
  
 </script>

 </body>
 
</html>