/** * gridPanel分页 */ function init() { // proxy var proxy = new Ext.data.HttpProxy({ url : "PageServlet" }); // Record定义记录结果 var Human = Ext.data.Record.create([{ name : "Hid", type : "int", mapping : "hid" }, { name : "Name", type : "string", mapping : "name" }, { name : "Sex", type : "string", mapping : "sex" }, { name : "Birthday", type : "string", mapping : "birthday" }, { name : "Education", type : "string", mapping : "edu" }, { name : "Memo", type : "string", mapping : "memo" }]); // Reader var reader = new Ext.data.JsonReader({//JSon对象 totalProperty : "totalProperty", root : "root" }, Human); var store = new Ext.data.Store({ proxy : proxy, reader : reader }); store.load({ params : { start : 0, limit : 6 } }); // 列模型 var cm = new Ext.grid.ColumnModel([ { header : "ID", width : 40, dataIndex : "Hid" }, { header : "姓名", width : 80, dataIndex : "Name", tooltip : "这是您的姓名" }, { header : "性别", width : 40, dataIndex : "Sex", align : "center" }, { header : "生日", width : 150, dataIndex : "Birthday", format : "Y-m-d" }, { header : "学历", width : 100, dataIndex : "Education", align : "center" }, { header : "备注", id : "memo", dataIndex : "Memo" }]); var grid = new Ext.grid.GridPanel({ title : "中国公民", width : 650, autoHeight : true, cm : cm,//列模型 store : store, renderTo : Ext.getBody(), autoExpandColumn : "memo",// 自动伸展 viewConfig:{ forceFit:true,//用于按照一定的比例拉伸列的宽度 enableRowBody:true,//是否启用RowBody showPreview:true,//控制摘要内容是否显示还是隐藏 getRowClass:function(record,rowIndex,p,store){ if(this.showPreview){ p.body='<p style="padding:5px;border:1px #DFE8F6 solid;margin:2px;" mce_style="padding:5px;border:1px #DFE8F6 solid;margin:2px;"><span style="color:#15428B; font-weight:bold;" mce_style="color:#15428B; font-weight:bold;">备 注:</span>'+record.data.Memo+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, bbar : new Ext.PagingToolbar({//分页Toolbar store : store, pageSize : 6,//很重要,每页显示几条数据 displayInfo : true, displayMsg : "本页显示第{0}条到第{1}条的记录,一共{2}条", emptyMsg : "没有记录", items:["-",{ icon:"Test/WebRoot/ext/resources/images/default/s.gif", cls:"x-btn-text-icon", pressed:true, enableToggle:true, text:"隐藏备注", cls:'x-btn-text-icon-details', toggleHandler:function(btn,pressed){ var view=grid.getView(); if(pressed){ btn.setText("隐藏备注"); } else{ btn.setText("显示备注"); } view.showPreview=pressed; view.refresh(); } }] }) }); }; Ext.onReady(init)