【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"> ...
随机推荐
- Google Polymer以及Web UI框架
时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Compone ...
- [转]LUA 学习笔记
Lua 学习笔记 入门级 一.环境配置 方式一: 1.资源下载http://www.lua.org/download.html 2.用src中的源码创建了一个工程,注释调luac.c中main函数,生 ...
- 【题解】【位操作】【Leetcode】Single Number II
Given an array of integers, every element appears three times except for one. Find that single one. ...
- How to use HaploView
HaploView is a program that is used to visualize the LD blocks of SNPs. What I need to do is the fo ...
- Java自带的keytool命令
使用Java自带的keytool命令,在命令行生成. 1.生成服务器端私钥kserver.keystore文件 keytool -genkey -alias serverkey -validity 1 ...
- Linux下软件包的多种安装方式
源码包安装 在Linux下的很多软件都是通过源码包方式发布的,虽然相对于二进制软件包,配置和编译起来繁琐点,但是它的可移植性却好得多,针对不同的体系结构,软件开发者往往仅需发布同一份源码包,不同的最终 ...
- tyvj1013 - 找啊找啊找GF ——二维背包变种
题目链接:https://www.tyvj.cn/Problem_Show.aspx?id=1013 好吧,这题没节操=_= 状态f[u,v,i]表示:消费u的人民币和v的人品同时泡到i个mm所需要的 ...
- SQLServer如何用T—SQL命令查询一个数据库中有哪些表
1.查询SQL中的所有表: Select TABLE_NAME FROM 数据库名称.INFORMATION_SCHEMA.TABLES Where TABLE_TYPE='BASE TABLE' 执 ...
- 关于xmlhttprequest的readystate属性的五个状态
http://www.cnblogs.com/jerry01/archive/2009/09/03/1559624.html 昨天做了一个利用 ajax实现页面无刷新的从服务器端获得时间的例子,当时对 ...
- JavaWeb学习记录（四）——日期和数字的格式转换
一.Date转为String (1) public class DateUtil { private static SimpleDateFormat sdf = new SimpleDateFo ...