Ext4.1 Grid 分页查询

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

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

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

[javascript] view plain copy

/**预加载的组件**/
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：

巴特西

Ext4.1 Grid 分页查询

最新文章

热门文章