【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的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>
【extjs】 ext5 Ext.grid.Panel 分页,搜索的更多相关文章
- [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- 【extjs】 extjs5 Ext.grid.Panel 搜索示例
先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...
- Ext.grid.Panel表格分页存储过程
/*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的 ...
- Ext.grid.Panel表格分页
转载:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html cshtml @{ Layout = null; } <!D ...
- ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...
- 导出Ext.grid.Panel到excel
1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...
- Extjs——简单的Grid panel小实例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
随机推荐
- magento搬家步骤和可能遇到的问题
将原来网站文件中的var文件中的cache和session文件删除,将media中的缓存文件删除.然后将所有文件制作成一个压缩包,以减少文件体积,方便转移. 将压缩包转移到新的服务器域名指向的文件夹, ...
- 动态数组 - ArrayList
前言 如果数组的大小要随时间变化,那么数组操作起来就比较麻烦. 在C++中,这种情况要用到动态向量Vector. 而Java中,提供了一种叫做ArrayList的泛型数组结构类型,提供相似的作用. 其 ...
- hdu 4253 Two Famous Companies BZOJ 2654 tree
[题意]:给出n个点,m条边,边分为两种,一种是A公司的,一种是B公司的.边上有权值,问用n-1条边把n个点连起来的最小费用是多少,其中A公司的边刚好有k条.题目保证有解. 思路:我们发现,如果我们给 ...
- HDU 4358 莫队算法+dfs序+离散化
Boring counting Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 98304/98304 K (Java/Others)T ...
- jqueryflot图表x轴坐标过长完美解决方案(转)
近段时间,项目中使用到了flot这个图表工具,在实际使用的过程中,遇到了一个看似很简单的问题:当坐标的刻度如果过长时,会重叠在一起,影响阅读: 看到这个效果后的第一反应就是,能不能让坐标斜着显示啊?去 ...
- MySQL日志功能
1.查询日志 log={ON|OFF}:是否记录所有语句的日志信息于一般查询日志文件(general_log); log_output={TABLE|FILE|NONE},TABLE和FILE可以同时 ...
- MongoDB副本集搭建及备份恢复
一.MongoDB副本集(repl set)介绍 早起版本使用master-slave,一主一从和MySQL类似,但slave在此架构中为只读,当主库宕机后,从库不能自动切换为主: 目前已经淘汰了ma ...
- poj1062 最短路
题意:有n个物品,任务是得到1号物品,现在每个物品有它的主人,你可以用金钱购买物品,当然也可以用其他物品加上优惠的价格换取,但是有个要求,因为每个物品的主人有各自的等级,你所交易过的人中,等级差不能超 ...
- 【NOIP2012】国王游戏
这一次高精度完美地过辣好开心OvO,还get到了非常方便的高精度除小于10000的方法,这个是我自己脑出来的OvO 看来下午高精度傻逼得值qvq 原题: 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个 ...
- Windows7下QT5开发环境搭建 分类： QT开发 2015-03-09 23:44 65人阅读 评论(0) 收藏
Windows7下QT开法环境常见搭配方法有两种. 第一种是:QT Creator+QT SDK: 第二种是:VS+qt-vs-addin+QT SDK: 以上两种均可,所需文件见QT社区,QT下载地 ...