extjs extjs5 Ext.grid.Panel 搜索示例
Posted xwolf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs extjs5 Ext.grid.Panel 搜索示例相关的知识,希望对你有一定的参考价值。
先看效果图:
页面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 搜索示例的主要内容,如果未能解决你的问题,请参考以下文章
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
extjs extjs5 Ext.grid.Panel 搜索示例