Ext4.1 Grid 分页查询

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

 

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

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

/**预加载的组件**/
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager',
    'Ext.layout.container.Border'
]);

Ext.onReady(function(){

    Ext.Ajax.timeout = 60000; // 60秒

    var pageSize = 10;

    //自定义正则表达式验证
    Ext.apply(Ext.form.VTypes,{
        phonecheck : function(val) {
            return /(^[1][358][0-9]{9}$)/.test(val);
        },
        phonecheckText : "号码不匹配!"
    },{
        usercheck : function(val) {
            //var reg = /(^[1][358][0-9]{9}$)/;
            //if(reg.test(val)==false){
            //  return false;
            //}
            return /^[a-z]+$/.test(val);
        },
        usercheckText : "格式不正确，只接受小写字母！"
    });

    var form = Ext.create('Ext.form.Panel', {
        id:'userForm',
        title:'添加系统用户',
        layout: 'column',
        defaultType: 'textfield',
        width: '100%',
        height: 140,
        bodyStyle: 'padding:5px',
        animCollapse:true,
        region : 'north',
        collapsible:true,
        border: true,
        frame: true,
        plan: true,
        items: [{
            columnWidth: .3,
            id:'userId',
            name:'userId',
            fieldLabel: '用户编号',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入用户编号',
            allowBlank: false,
            maxLength:18,
            minLength:5,
            vtype:'usercheck'
        },{
            id:'userName',
            name:'userName',
            fieldLabel: '用户姓名',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入用户名',
            allowBlank: false,
            maxLength:18,
            minLength:5,
            columnWidth: .3
        },{
            id:'password',
            name:'password',
            fieldLabel: '密码',
            fieldWidth: 30,
            inputType:'password',
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入密码',
            allowBlank: false,
            columnWidth: .3
        },{
            id:'userMail',
            name:'userMail',
            fieldLabel: '电子邮箱',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入电子邮箱',
            allowBlank: false,
            vtype: 'email',
            style: {
                marginTop: '10px'
            },
            columnWidth: .3
        },{
            id:'phoneno',
            name:'phoneno',
            fieldLabel: '手机号',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入手机号',
            allowBlank: false,
            vtype:'phonecheck',
            style: {
                marginTop: '10px'
            },
            columnWidth: .3
        },{
            id:'remark',
            name:'remark',
            fieldLabel: '备注信息',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '请输入备注信息',
            allowBlank: true,
            style: {
                marginTop: '10px'
            },
            columnWidth: .3
        }],
        buttons: ['->', {
            text: '添加用户',
            iconCls: 'icon-add',
            formBind: true,
            handler:function(){
                var form = Ext.getCmp('userForm').getForm();
                if(form.isValid()){
                    form.submit({
                        url: '/mymis/system/userinfo/addUserInfo.action',
                        method:'post',
                        waitTitle: "请稍候",
                        waitMsg : '提交数据，请稍候...',
                        success: function(form, action) {
                            Ext.Msg.alert('Success', '保存成功!');
                            var flag = action.result.reason;
                            if(flag == "exists"){
                                Ext.Msg.alert('警告', '系统中已存该用户编号，请重新输入！');
                            }else{
                                Ext.Msg.alert('提示', '用户信息成功添加!');
                                var grid = Ext.getCmp("myGrid");
                                var store = grid.getStore();
                                store.load({ params: { start: 0, limit: pageSize} });
                                grid.reconfigure();
                            }
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('错误', '用户信息添加失败，请联系管理员！');
                        }
                    });
                }
            }
        },'-',{
            text: '重  置',
            iconCls: 'icon-reset',
            handler:function(){
                Ext.getCmp('userForm').getForm().reset();
            }
        }]
    });

    /**grid**/
    Ext.define('MsgList', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'USER_ID',  type: 'string'},
            {name: 'USER_NAME',  type: 'string'},
            {name: 'USER_MAIL',  type: 'string'},
            {name: 'PHONE_NO',  type: 'string'}
        ],
    });

    var myStore = Ext.create('Ext.data.Store', {
        id:'myStore',
        model: 'MsgList',
        pageSize:pageSize,
        autoLoad: true,
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url : '/mymis/system/userinfo/queryUserInfo.action',
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'total'
            },
            simpleSortMode: true
        },
    });

    var titleBar = Ext.create('Ext.toolbar.Toolbar', {
        renderTo: Ext.getBody(),
        width : 600,
        layout: {
            overflowHandler: 'Menu'
        },
        items: [{
            xtype:'textfield',
            id:'searchMsg',
            name: 'searchMsg',
            fieldLabel: '请输入查询条件',
            allowBlank: true
        },'-',{
            xtype:'button',
            text:'查询',
            iconCls: 'icon-search-form',
            handler: function(){
                var txtSearch = Ext.String.trim(Ext.getCmp("searchMsg").getValue());
                var grid = Ext.getCmp("myGrid");
                var store = grid.getStore();
                //var pagingTB = Ext.getCmp("pagingBT");
                store.load({ params: { start: 0, limit: pageSize,searchMsg: txtSearch} });
                grid.reconfigure();
                //alert(pagingTB);
                //pagingTB.doRefresh();
            }
        }]
    });

    var grid = Ext.create('Ext.grid.Panel', {
        id:'myGrid',
        tbar:titleBar,
        store: myStore,
        frame: true,
        region:'center',
        border: true,
        split: true,
        loadMask:{msg:"数据加载中，请稍等..."},
        //collapsible: true,
        //autoHeight : true,
        columns: [
            { header: '编号', dataIndex: 'USER_ID', flex: 2 },
            { header: '姓名', dataIndex: 'USER_NAME', flex: 6 },
            { header: '邮箱', dataIndex: 'USER_MAIL', flex: 3 },
            { header: '手机号', dataIndex: 'PHONE_NO', flex: 3 }
        ],
        //features: [{ftype:'grouping'}],
        width: '100%',
        height: Ext.getBody().getHeight() - 140,
        //loadMask: true,
        bbar: Ext.create('Ext.PagingToolbar', {
            id:'pagingBT',
            store: myStore,
            displayInfo: true,
            displayMsg: '显示 第 {0} - {1} 条记录 一共 {2} 条记录',
            emptyMsg: "没有一第记录显示"
        })
    });

    Ext.create('Ext.container.Viewport',{
        layout : 'border',
        items : [form,grid]
    });
    //带自定义参数的分页
    myStore.on('beforeload', function (store, options) {
        var searchMsg = Ext.getCmp('searchMsg').getValue();
        Ext.apply(store.proxy.extraParams, {searchMsg: searchMsg});
    });
    myStore.load({ params: { start: 0, limit: pageSize} });
});

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