?
前台extjs的js代码：
Ext.onReady(function () {
? ? Ext.create('Ext.container.Viewport', {
? ? ? ? layout: 'border',
? ? ? ? width:500,
? ? ? ? items: [
? ? ? ? ? ?
? ? ? ? ?{
? ? ? ? ? ? region: 'center',
? ? ? ? ? ??
? ? ? ? ? ? xtype: 'tabpanel',?
? ? ? ? ? ? items: [
? ? ? ? ? ??
? ? ? ? ? ? Qgrid
? ? ? ? ? ? ]
? ? ? ??
? ? ? ? }]
? ? });
?
? ?
});
?
? ?var pageSize = 4;//每页多少数据
?
? ?var gridstore = Ext.create('Ext.data.Store', {
? ?storeId:'QsimpsonsStore',
? ? ? ?pageSize: pageSize,//分页。。。
? ? ? ?fields: [
? ? ? ? ? ? { name: 'ID', type: 'int' },
? ? ? ? ? ? { name: 'NAME', type: 'string' },
? ? ? ? ? ? { name: 'IDENT', type: 'string' },
? ? ? ? ? ? { name: 'qualify', type: 'bool' },
? ? ? ? ? ? { name: 'exam_date', type: 'string' },
? ? ? ? ? ? { name: 'nowtime', type: 'string' }
? ? ? ? ? ??
? ? ? ? ? ?],//定义字段
?
? ? ? ? proxy:{ ?
? ? ? ? ? ? ? ? type: 'ajax', ?
? ? ? ? ? ? ? ? url:'studentgridAction.action', //请求的数据的url ?-------下面有后台代码
? ? ? ? ? ? ? ? ?reader:{ ?
? ? ? ? ? ? ? ? ? ? ? ? ? type:'json', ?
? ? ? ? ? ? ? ? ? ? ? ? ? root:'students', //对应action中需要被现实的字段 ?
? ? ? ? ? ? ? ? ? ? ? ? ? totalProperty: 'total' ?//数据总数
? ? ? ? ? ? ? ? ? ? ? ? ?} ?
? ? ? ? ? ? ? ?},
? ? ? ? sorters:[{property:"ID",direction:"ASC"}],//按qq倒序
? ? ? ? autoLoad:{params:{start:0,limit:pageSize}}//自动加载，每次加载一页
??
? ?})
? ?
? ?//------------------
? ?function renderSex(value, cellmeta, record, rowIndex, columnIndex, store)//value当前单元格的值，record是这行的所有数据，store表格里所有的数据
? ?{
? ? ? ? if(value==false)
? ? ? ? {
? ? ? ? ? ? return "<span style='color:red;font-weight:bold;'>无</span>";
? ? ? ? } ??
? ? ? ? else
? ? ? ? {
? ? ? ? ? ? //return record.get('qualify');
? ? ? ? ? ? return "<span style='color:green;font-weight:bold;'>有</span>";
? ? ? ? } ? ? ? ??
? ?}
? ?
?
? //----------------
var Qgrid=Ext.create("Ext.grid.Panel",{
? ? ? ?title:'学生列表',
? ? ? ?frame: true,
? ? ? ?rowLines: false,
? ? ? ?columns: [//配置表格列
? ? //序号
? ?Ext.create("Ext.grid.RowNumberer",{
? ?width: 40,
? ?text:'序号'
? ?
? ?}),
? ?{header: "学生账号", width: 200, dataIndex: 'ID', sortable: false},//renderer:renderSex可自定义显示
? ? ? ? ? ? ? ? {header: "学生姓名", width: 200, dataIndex: 'NAME', sortable: false},
? ? ? ? ? ? ? ? /*{header: "考试资格", width: 200, dataIndex: 'qualify', xtype: 'booleancolumn', sortable: false,
? ? ? ? ? ? ? ? trueText: "<span style='color:green;font-weight:bold;'>有</span>", ?
? ? ? ? ? ? ? ? ? ? falseText: "<span style='color:red;font-weight:bold;'>无</span>" //一样效果
? ? ? ? ? ? ? ? }*/
? ? ? ? ? ? ? ? {header: "考试资格", width: 200, dataIndex: 'qualify', sortable: false,renderer:renderSex}//渲染函数
? ? ? ? ? ? ],
?
store:gridstore,//指定grid的数据源
//多选框
?
selType:'checkboxmodel',
multiSelect:true,
//分页控件
? ? ? ? ? ? ?dockedItems: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? xtype: 'pagingtoolbar',
? ? ? ? ? ? ? ? ? ? pageSize : pageSize,//分页....
? ? ? ? ? ? ? ? ? ? store:gridstore,?
? ? ? ? ? ? ? ? ? ? dock: 'bottom', //分页 位置
? ? ? ? ? ? ? ? ? ? emptyMsg: '没有数据',
? ? ? ? ? ? ? ? ? ? displayInfo: true,
? ? ? ? ? ? ? ? ? ? displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
? ? ? ? ? ? ? ? ? ? beforePageText: '第',
? ? ? ? ? ?
