Ext项目中使用_日志页2

Ext.onReady(function(){
?Ext.BLANK_IMAGE_URL = './images/default/s.gif'
?// 定义记录集
??var dataFormate = Ext.data.Record.create([ {
???name : "uuid",
???type : "int"
??}, {
???name : "logdate",
???type : "date",
???dateFormat:'Y-m-d'
??}, {
???name : "userid"
??}, {
???name : "username"
??}, {
???name : "url"
??}, {
???name : "parameter"
??}, {
???name : "method"
??}]);

??// 定义数据集对象
??var dataStore = new Ext.data.Store( {
???reader : new Ext.data.XmlReader( {
????totalProperty : "results",
????record : "BaseUserLog",
????id : 'uuid',
????root : "list"
???}, dataFormate),
???proxy : new Ext.data.HttpProxy( {
????url : "/bfk/baseuserlogqueryAction.action"
???})
?})
?dataStore.load({params:{start:0,limit:30}});
?//定义表格的列
?var cm = new Ext.grid.ColumnModel([
??new Ext.grid.RowNumberer(),
??{
???header:'编号',dataIndex:'uuid',sortable:true?
?????
??},{
???header:'用户ID',dataIndex:'userid',sortable:true?
???
??},{
???header:'用户名称',dataIndex:'username',sortable:true
???
??},{
???header:'url',dataIndex:'url',sortable:true
???
??},{
???header:'参数',dataIndex:'parameter',sortable:true
???
??},{
???header:'请求方式',dataIndex:'method',sortable:true
???
??},{
???header:'日期',dataIndex:'logdate',sortable:true,
???renderer:Ext.util.Format.dateRenderer('Y年m月d日')???
??}
?]);
?
?//提示按钮自动隐藏
?function delayMsg(){
????? var txt = Ext.Msg.getDialog().buttons[0].getText();??
???var s = 3;??
???Ext.TaskMgr.start({??
???run:function(){??
?????if(s<=0){??
??????Ext.Msg.hide();??
??????return false;??
?????}else{??
??????Ext.Msg.getDialog().buttons[0].setText(txt+'('+s+')');??
??????s--;??
?????}??
???},??
???scope: this,??
???interval: 1000?
???});?? ?
?}
?
?//定义表格分页工具条
?var pageToolbar = new Ext.PagingToolbar({
??store: dataStore,
??displayMsg: '&nbsp;&nbsp;总共【<b><font color=red>{2}</font></b>】条:当前第<span class="spec">{0}</span>条～第<b><span class="spec">{1}</span>条',
??emptyMsg: '没有信息',
??beforePageText: '页',
??firstText: '首页',
??prevText: '前一页',
??nextText: '后一页',
??lastText: '最后页',
??refreshText: '刷新',
??pageSize:30,
??displayInfo: true,
??items: ['&nbsp;&nbsp;&nbsp;&nbsp;每页显示数', new Ext.form.ComboBox({
???store: new Ext.data.SimpleStore({
???fields: ['pageid', 'pagename'],
???data: [[5, 5],[10, 10], [15, 15], [20, 20], [30, 30], [50, 50], [80, 80], [100, 100],[150, 150],[200, 200],[300, 300]]
???}),
???width: 50,displayField: 'pagename',typeAhead: true,mode: 'local',value:30,triggerAction: 'all',selectOnFocus: true,
???listeners: {
???change: {
???fn: function(box, newValue, oldValue){
????change_PageSize(newValue);
???}
???}
???}
??})]
?});
?
?//改变每页显示的数
?function change_PageSize(newValue){
????? pageToolbar['pageSize']=parseInt(newValue);
????? dataStore.reload({ params : { start : 0, limit : newValue} });
?};
?
?//定义工具栏
?var tbar = new Ext.Toolbar({
??defaults:{xtype:'datefield',style:{margin:'0,15,0,15'}},
??items:[{xtype: 'tbfill'},{xtype: 'tbseparator'},
???'起始时间：',
???{
????id:'startDate' ,editable:false,format:'Y-m-d',
????listeners:{
?????'select':function(datafield, date){
??????var endDate = Ext.getCmp('endDate').getValue();??????
??????Ext.getCmp('endDate').setMinValue(date);
??????if(endDate != ''){
???????Ext.getCmp('delBtn').enable();
??????}
?????}
????}
???},
???'结束时间：',
???{
????id:'endDate',editable:false,format:'Y-m-d',
????listeners:{
?????'select':function(datafield, date){
??????//alert(date);
??????var startDate = Ext.getCmp('startDate').getValue();
??????Ext.getCmp('startDate').setMaxValue(date);
??????if(startDate != ''){
???????Ext.getCmp('delBtn').enable();
??????}
?????}
????}
???},
???{
????xtype:'button',text:'删除',id: 'delBtn', iconCls: 'icon-user-delete',
????disabled:true,
????handler:function(){
?????Ext.Ajax.request({
??????url:'/bfk/baseuserlogdeleteByTimeAction.action',
??????params:{'bqm.startDate':Ext.getCmp('startDate').getValue(),'bqm.endDate':Ext.getCmp('endDate').getValue()},
??????success:function(response,options){
???????var resText = Ext.util.JSON.decode(response.responseText);
???????if(resText.success){
????????Ext.Msg.alert('提示','删除成功');
????????delayMsg();
????????resetDel();
???????}else{
????????//从服务端返回描述
????????Ext.Msg.alert('错误',resText.msg);
????????delayMsg();
????????resetDel();
???????}
???????
??????},
??????failure : function(response,options){
???????Ext.Msg.alert('错误',"删除失败");
???????delayMsg();
???????resetDel();
??????}
?????});
????}
???}
??]});
?//删除日期后重新加载数据
?var resetDel = function(){
??//清空数据
??Ext.getCmp('startDate').setValue('');
??Ext.getCmp('endDate').setValue('');
??Ext.getCmp('delBtn').disable();
??//重新加载数据
??dataStore.reload({params:{start:0,limit:pageToolbar.pageSize}});
?}
?//定义表格
?var grid = new Ext.grid.GridPanel({
??loadMask:true,
??viewConfig:{
???columnsText:"显示列",
???sortAscText:"升序",
???sortDescText:"降序",
???forceFit:true
??},
??store: dataStore,
??stripeRows:true,
??cm:cm,
??bbar:pageToolbar,
??tbar:tbar
?});
?
?//查询form
?var queryForm = new Ext.FormPanel({
?????layout:'form',
?????
?????frame: true,
???items:[
????new Ext.form.FieldSet({
?????
???????????????? title: '根据以下条件查询：',
???????????????? autoHeight: true,
???????????????? labelAlign: 'right',
???????????????? defaults: {xtype:"textfield",width:120},
???????????????? frame:true,
????????????????
???????????????? items:[
??????{
???????id:"userid",
???????fieldLabel:"用户id",
???????xtype:"textfield"
???????
??????},
??????
??????{
???????id:"username",
???????fieldLabel:"用户名称"
??????},
??????
??????{
???????id:"url",
???????fieldLabel:"url"
??????},
??????
??????new Ext.form.ComboBox({
???????id:"method",
???????fieldLabel:"请求方式",
???????editable: false,
????????? typeAhead: true,
????????? triggerAction: 'all',
????????? lazyRender:true,
????????? mode: 'local',
????????? store: new Ext.data.ArrayStore({
????????????? id: 0,
????????????? fields: [
????????????????? 'id',
????????????????? 'displayText'
????????????? ],
????????????? data: [['GET', 'GET'], ['POST', 'POST']]
????????? }),
????????? valueField: 'id',
????????? displayField: 'displayText'
??????}),
??????
??????{
???????id:"logdate",
???????name:"bqm.logdate",
???????fieldLabel:"日期",
???????xtype:'datefield',
???????format:'Y-m-d',
???????editable:false??????
??? ??????
???????
??????}
???????????????? ],
????????????????? buttons: [{
??????????????? text: '查询',
??????????????? buttonAlign:'center',
??????????????? handler:function(){
??????????????? ?
??????????????? ?dataStore.baseParams = dataStore.baseParams || {};
??????????????? ?dataStore.baseParams['bqm.userid']=Ext.getCmp('userid').getValue();
??????????????? ?dataStore.baseParams['bqm.username']=Ext.getCmp('username').getValue();
??????????????? ?dataStore.baseParams['bqm.url']=Ext.getCmp('url').getValue();
??????????????? ?dataStore.baseParams['bqm.method']=Ext.getCmp('method').getValue();
??????????????? ?dataStore.baseParams['bqm.logdate']=Ext.getCmp('logdate').getValue();
??????????????? ?dataStore.reload({params:{start:0,limit:pageToolbar.pageSize}});
??????????????? ?
??????????????? }
??????????? },{
??????????????? text: '重置',
??????????????? handler:function(){
??????????????? ?queryForm.form.reset();
??????????????? ?dataStore.baseParams = dataStore.baseParams || {};
??????????????? ?dataStore.baseParams['bqm.userid']=Ext.getCmp('userid').getValue();
??????????????? ?dataStore.baseParams['bqm.username']=Ext.getCmp('username').getValue();
??????????????? ?dataStore.baseParams['bqm.url']=Ext.getCmp('url').getValue();
??????????????? ?dataStore.baseParams['bqm.method']=Ext.getCmp('method').getValue();
??????????????? ?dataStore.baseParams['bqm.logdate']=Ext.getCmp('logdate').getValue();
??????????????? ?dataStore.reload({params:{start:0,limit:pageToolbar.pageSize}});
??????????????? }
??????? ??? }]
????})
???]
?});
?
?//布局
?var viewport = new Ext.Viewport({
????? layout:'border',
?????
????? items:[{
????? ??region: 'north',
?????????? html:'',
?????????? height:60,
????? ??baseCls:"x-plain"
????? ?},{
????? ??title:'数据展示',
????? ??region: 'center',
????? ??layout:'fit',
?????????? items:[grid]
????? ?},{
????? ??title:'查询',
????? ??layout:'fit',
????? ??autoScroll:true,
????? ??region:'east',
????? ??width:300,
????? ??split:true,
????? ??html:'',
????? ??collapsible:true,
????? ??items:[
????? ???queryForm????? ???
????? ??]
????? ?},{
????? ??title:'<br>',
????? ??region:'south',
????? ??height:0
????? ?}]
??})
});