先看效果图:

页面js:

<script type="text/javascript">

 /**
* 日志类型 store
* */
var logTypeStore = 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,//可折叠
titleCollapse:true,
bodyPadding: 5,
layout: 'column',
items: [{
fieldLabel: '日志类型',
labelWidth:60,
id: 'type',
xtype:"combo",
editable:false,
store:logTypeStore,
valueField:'type',
displayField:'name'
}, {
fieldLabel: '日志开始时间',
labelWidth:78,
id: 'start',
xtype:"datefield",
format: 'Y-m-d',
editable:false
},{
fieldLabel: '日志结束时间',
labelWidth:78,
id: 'end',
xtype:"datefield",
format: 'Y-m-d',
editable:false
},{
xtype: 'button',
text: '搜索',
iconCls :"search",
margin: '0 0 0 5',
handler: function () {
var start = Ext.getCmp('start').getValue(); //获取文本框值
var end = Ext.getCmp('end').getValue();
var type = Ext.getCmp('type').getValue(); logStore.load({ params: { startDate: start,endDate:end,type:type} });//传递参数 }
}],
renderTo: Ext.getBody()
});
//数据
var logStore=Ext.create('Ext.data.Store', {
storeId:'logStore',
fields:['type', 'param', 'url','vip','vtime','lid'],
proxy: {
type: 'ajax',
url:'${pageContext.request.contextPath}/back/sysLog/sysLogList.do',
reader: {
// 設置 json樣式
type: 'json',
rootProperty:"rows", //json 数据根节点
totalProperty:"total"//总数
}
},
autoLoad: true,
pageSize:25 //每页记录数默认25
}); logStore.on('beforeload',function(store, options){
var start = Ext.getCmp('start').getValue(); //获取文本框值
var end = Ext.getCmp('end').getValue();
var type = Ext.getCmp('type').getValue();
var new_params ={ startDate: start,endDate:end,type:type};
Ext.apply(store.proxy.extraParams, new_params);
});
logStore.load({
params: {
start: 0,
limit: 10
}
}); var ckm=Ext.create("Ext.selection.CheckboxModel");
Ext.onReady(function(){ /**
Grid 数据展示
*/
Ext.create('Ext.grid.Panel', {
title: '日志信息',
id:'logGridPanel',
selModel:ckm,
store:logStore,// Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: '日志ID', dataIndex: 'lid',align: 'center',hidden:true,hideable:false,sortable:false }, { text: '标题', dataIndex: 'title',align: 'center',sortable:false },
{ text: '访问链接', dataIndex: 'url',align: 'center',sortable:false },
{ text: '访问者IP', dataIndex: 'vip',align: 'center',sortable:false },
{ text: '日志时间', dataIndex: 'vtime',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: 'type',align: 'center',sortable:false,renderer:function(value){
// console.info('用户类型:'+value+",类型:"+ typeof value);
return value==1?"登录日志":"操作日志";
} },
{ text: '请求参数', dataIndex: 'param',align: 'center',sortable:false },
],
forceFit:true,//强制列表宽度自适应
autoLoad:true,
//工具条
tbar: Ext.create('Ext.toolbar.Toolbar',{ //width : 500,
items: [{
text: '删除',
xtype: 'button',
iconCls: 'delete',
id: 'log_delete',
hidden:false,
handler: logInfoDel
}] }),
renderTo: Ext.getBody(),
//分页
bbar: Ext.create('Ext.toolbar.Paging',{
beforePageText:'当前第',
afterPageText:'页',
refreshText:'刷新',
store:logStore,
displayInfo:true,
displayMsg:'显示:{0}-{1}条,总共:{2}条',
emptyMsg:'当前查询无记录'
})
});
}); //删除日志信息
function logInfoDel(){ var uid='';
var selectionModel = Ext.getCmp('logGridPanel').getSelectionModel();
var selection = selectionModel.getSelection();
if(selection.length==0){
Ext.Msg.alert("提示","请选择要删除的记录!");
return ;
}else{
Ext.Msg.confirm("提示","确定删除?",function(button, text){
if(button=="yes"){
for(var i=0;i<selection.length;i++){
uid = uid+selection[i].get('lid')+",";
}
Ext.Ajax.request({
url: '${pageContext.request.contextPath}/back/sysLog/delete.do',
params:{ids: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('logGridPanel').getStore().reload();
},
failure: function(response, opts) {
Ext.Msg.alert("信息提示","刪除失敗!");
}
});
}
}); } } </script>

  

【extjs】 extjs5 Ext.grid.Panel 搜索示例的更多相关文章

  1. [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

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

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  3. ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  4. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  5. Ext.grid.Panel表格分页存储过程

    /*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的 ...

  6. Ext.grid.Panel 数据动态改变后刷新grid

    gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...

  7. Ext.grid.Panel表格分页

    转载:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html cshtml @{ Layout = null; } <!D ...

  8. 导出Ext.grid.Panel到excel

    1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...

  9. Extjs——简单的Grid panel小实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

随机推荐

  1. WCF之多个终结点

    1.服务端配置如下(一个Service节点下可有多个endpoint,): <system.serviceModel> <services> <service name= ...

  2. 解决在MainPage中,点击实体返回按键不能退出的问题

    开发Windows Phone应用程序的时候,我在其它页面有写过这样的代码: private void btCancel_Click(object sender, EventArgs e) { Nav ...

  3. BSP、PSP到底指什么?

    /************************************************************************* * BSP.PSP到底指什么? * 说明: * B ...

  4. Ubuntu Vim 复制到系统粘贴板

    /************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...

  5. 《JS高程》JS-Object对象整理

    继上篇<JS高程>对象&原型笔记,对JavaScript中的Object对象进行了整理,梳理一遍~ 参考文章:详解Javascript中的Object对象 ------------ ...

  6. word文档快速取消图片的链接

    快捷键Ctrl+Shift+F9 首先,Ctrl+A全选文章或者用鼠标拖动的方法选中部分文中: 批量删除word文档中的超级链接然后,同时按下键盘上的Ctrl+Shift+F9. 效果就出现了! 宏方 ...

  7. 让Grub 2来拯救你的 bootloader

    没有什么事情比 bootloader 坏掉更气人的了,充分发挥 Grub 2 的作用,让 bootloader 安分工作吧.为什么这么说? Grub 2 是最受欢迎的 bootloader ,几乎用在 ...

  8. Spring事务配置的五种方式 -- 越往后需要Spring版本越高

    第五种 基本零配置  个人感觉第四种也可以 Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式, ...

  9. JavaWeb学习记录(二十四)——获取插入数据后,自动生成的id值

    public Integer insertObjects(final Goods entity) { // 定义sql语句        final String sql1 = "inser ...

  10. phpwind数据同步本地后登陆异常

    在讲数据同步到本地之后,发现输入用户名和密码之后点击登陆,依然会返回到之前的页面,并且显示的还是未登录的状态. 解决办法:在后台中将:站点设置--cookie作用域留空即可.