extjs学习二 gridpanel 展现数据以及分页

 

Ext.namespace("Inspur");Ext.namespace("Inspur.corenet");Ext.namespace("Inspur.corenet.ReportManage");Inspur.corenet.ReportManage.MonitorManageViewPanel = Ext.extend(Ext.Panel, {width : "100%",autoHeight : true,title : "告警历史查询",alarmname : "",alarmtime : "",alarmlevel : "",kpiname : "",alarmreason : "",startnum : 0,constructor : function(config) {this.config = config;this.startnum = 0;this.alarmname = "";this.alarmtime = "";this.alarmlevel = "";this.kpiname = "";this.alarmreason = "";this.m_sm = new Ext.grid.CheckboxSelectionModel();Inspur.corenet.ReportManage.MonitorManageViewPanel.superclass.constructor.call(this);},getColumnModel : function() {var col = new Ext.grid.ColumnModel([this.m_sm, {header : "ID",dataIndex : "alarmid",hidden : true},{header : "告警名称",dataIndex : "alarmname",width:50},{header : "告警时间",dataIndex : "alarmtime",width:50},{header : "告警级别",dataIndex : "alarmlevel",width:50},{header : "KPI名称",dataIndex : "kpiname"},{header : "告警原因",dataIndex : "alarmreason"},{xtype : "actioncolumn",header : "概要",width:50,items : [{icon : 'Image/search.png',tooltip : "查看",handler : function(grid, rindex, cindex) {var record = grid.getStore().getAt(rindex);var myForm = new Ext.form.FormPanel({standardSubmit : true,width : 520,bodyStyle : "background-color:#DFE8F6;",labelAlign : "right",height : 350,items : [{xtype : 'textarea',fieldLabel : '告警公式',name : "showformula",ref : "showformula",width : 350,height : 100,labelStyle : 'font-weight:bold;',disabled : true}, {xtype : 'textfield',name : 'kpitime',fieldLabel : 'KPI时间 ',width : 350,ref : "kpitime",labelStyle : 'font-weight:bold;',disabled : true}, {xtype : 'textfield',name : 'kpivalue',fieldLabel : 'KPI值   ',width : 350,ref : "kpivalue",labelStyle : 'font-weight:bold;',disabled : true}, {xtype : 'textfield',name : 'nename',fieldLabel : '网元名称',ref : "nename",width : 350,labelStyle : 'font-weight:bold;',disabled : true}, {xtype : 'textarea',name : 'description',fieldLabel : '描述',ref : 'description',width : 350,height : 110,labelStyle : 'font-weight:bold;',disabled : true}]});myForm.getForm().load({url : '/Analysis/alarmSearchAction!getAlarmHistoryProfile.ilf?alarmid='+ record.get('alarmid'),waitTitle : '请等待',waitMsg : '正在加载中',success : function(form, action) {myForm.showformula.setValue(action.result.data.showformula);myForm.kpitime.setValue(action.result.data.kpitime);myForm.kpivalue.setValue(action.result.data.kpivalue);myForm.nename.setValue(action.result.data.nename);myForm.description.setValue(action.result.data.description);},failure : function(form, action) {Ext.Msg.alert('提示', '加载失败！');}})var win = new Ext.Window({modal : true,width : 535,title : "告警历史详情",resizable : false,constrain : true,labelAlign : "right",buttonAlign : "center",closeAction : "close",height : 340,items : [myForm]});win.show();}}]}]);return col;},getStore : function() {var curth = this;var ds = new Ext.data.Store({autoLoad : {params : {start : 0,limit : 20}},proxy : new Ext.data.HttpProxy({url : "/Analysis/alarmSearchAction!getAlarmHistory.ilf"}),reader : new Ext.data.JsonReader({root : "datas",totalProperty : "count"}, [{name : "alarmid"},{name : "alarmname"},{name : "alarmtime"},{name : "alarmlevel"},{name : "kpiname"},{name : "alarmreason"},{name : "Profile"}]),listeners : {beforeload : function() {ds.baseParams.start = 0;ds.baseParams.limit = 20;//ds.baseParams.alarmName = curth.alarmname;//// ds.baseParams.showformula=curth.showformula;//ds.baseParams.alarmtime = curth.alarmtime;//// ds.baseParams.alarmlevel=curth.alarmlevel;//// ds.baseParams.kpiname=curth.kpiname;//// ds.baseParams.kpivalue=curth.kpivalue;//// ds.baseParams.nename=curth.nename;//// ds.baseParams.alarmreason=curth.alarmreason;//// ds.baseParams.description=curth.description;//// ds.baseParams.vendoename=curth.vendoename;}}});return ds;},getGridPanel : function() {var col = this.getColumnModel();var ds = this.getStore();var curth = this;var grid = new Ext.grid.GridPanel({width : "100%",height : 300,//autoExpandColumn : 6,viewConfig:{forceFit:true},cm : col,loadMask : true,ref : "monitorgrid",ds : ds,bbar : new Ext.PagingToolbar({store : ds,displayInfo : true,pageSize : 20,displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg : "没有记录",doLoad : function(start) {this.store.load({params : {start : start,limit : this.pageSize,historyname : curth.localname,startTime : curth.startTime,endTime : curth.endTime}});}}),sm : this.m_sm,//title : "",autoScroll : true,tbar : new Ext.Toolbar({items : ['告警名称：', {xtype : "textfield",id : "alarmHistoryName",width : 100}, '开始时间：', {xtype : "datefield",id : "hstartTime",format : "Y-m-d",width : 100}, '结束时间：', {xtype : "datefield",id : "hendTime",format : "Y-m-d",width : 100}, '-', {text : "查询",scope : this,iconCls : "searIcon",handler : function() {curth.localname = Ext.getCmp("alarmHistoryName").getValue();curth.sTime = Ext.getCmp("hstartTime").getValue();curth.eTime = Ext.getCmp("hendTime").getValue();curth.startTime = new Date(curth.sTime).format("Y-m-d");curth.endTime = new Date(curth.eTime).format("Y-m-d");var gridstore = curth.monitorgrid.getStore();gridstore.load({params : {start : 0,limit : 10,historyname : curth.localname,startTime : curth.startTime,endTime : curth.endTime}});curth.monitorgrid.getBottomToolbar().bind(gridstore);curth.monitorgrid.getView().refresh();}}]})});return grid;},reloadgrid : function() {var gridstore = this.monitorgrid.getStore();gridstore.load({params : {start : 0,limit : 10,alarmname : this.alarmname,alarmtime : this.alarmtime,alarmlevel : this.alarmlevel,kpiname : this.kpiname,alarmreason : this.alarmreason}});this.monitorgrid.getBottomToolbar().bind(gridstore);this.monitorgrid.getView().refresh();},initComponent : function() {var grid = this.getGridPanel();Ext.apply(this, {items : grid});Inspur.corenet.ReportManage.MonitorManageViewPanel.superclass.initComponent.apply(this, arguments);}});

Ext中前台展现页面最常见的一种方式  难点在于如何跟后台进行数据交互  也就是解析后台穿过来的json

var ds = new Ext.data.Store({autoLoad : {params : {start : 0,limit : 20}},proxy : new Ext.data.HttpProxy({url : "/Analysis/alarmSearchAction!getAlarmHistory.ilf"}),reader : new Ext.data.JsonReader({root : "datas",totalProperty : "count"}, [{name : "alarmid"},{name : "alarmname"},{name : "alarmtime"},{name : "alarmlevel"},{name : "kpiname"},{name : "alarmreason"},{name : "Profile"}]),