var temporaryAttendanceGrid;
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store',{
id:'store',
fields:["UUID","NAME","TEACHERID","COURSE_START_TIME","COURSE_END_TIME","BARCODE",
"MODIFIER"],
pageSize : 25, //每页显示条数
proxy:{
type: 'ajax',
limitParam:'pageSize', // 每页显示条数
pageParam:'pageNo', // 那一页
url : '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceLoad.json',
reader: { //这里的reader为数据存储组织的地方,下面的配置是为json格式的数据,例如:[{"total":50,"rows":[{"a":"3","b":"4"}]}]
type: 'json', //返回数据类型为json格式
rootProperty: 'TemporaryAttendance.result', //数据
totalProperty: 'TemporaryAttendance.totalCount' //数据总条数
}
},
autoLoad:true
});
//store.getProxy().extraParams = {'pageSize':1};
temporaryAttendanceGrid = Ext.create('Ext.grid.Panel',{
id:'TemporaryAttendanceGrid',
//title:'临时考勤信息',
store:store,
region : 'center',
//border:true,
columnLines: true,
loadMask: true,
height : '60%',
selModel: { selType: 'checkboxmodel' }, //选择框
tbar:[
{text:'新增',iconCls:'create',handler:showAlert},"-",
{text:'修改',iconCls:'modify',handler:showAlert},"-",
{text:'删除',iconCls:'remove',handler:showAlert},"-",
{text:"搜索",iconCls:"search",handler:showAlert}],
columns:[
{dataIndex : 'UUID', text:'主键',hidden:true},
{dataIndex : 'NAME', text:'名称',width:120},
{dataIndex : 'TEACHERID', text:'任课老师id',width:120},
{dataIndex : 'COURSE_START_TIME', text:'上课开始时间',maxWidth:200},
{dataIndex : 'COURSE_END_TIME', text:'上课结束时间',maxWidth:200},
{dataIndex : 'BARCODE', text:'签到码',width:120},
{dataIndex : 'CREATOR', text:'创建者',width:120},
{dataIndex : 'MODIFIER', text:'修改者',hidden:true},
{dataIndex : 'CREATE_TIME', text:'创建时间',width:120},
{dataIndex : 'MODIFY_TIME', text:'修改时间',hidden:true}],
bbar: [{
xtype: 'pagingtoolbar',
store: store,
displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
emptyMsg: "没有数据",
beforePageText: "当前页",
afterPageText: "共{0}页",
displayInfo: true
}]
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
//renderTo:Ext.getBody(),
style : 'background-color: #f5f5f5;',
items : [temporaryAttendanceGrid]
});
});
function showAlert (){
var selectedData = temporaryAttendanceGrid.getSelectionModel().getSelection()[0].data;
Ext.MessageBox.alert("标题",selectedData.cataId);
}
一、gridPanel几个必须配置的项:store(数据格式组织、存储),columns(展示到页面的格式,数据组织)。
1、store里面有个fields配置,为需要的数据字段,跟读取到的数据(本地,或远程获取的)字段对应。
2、columns中的text为grid展示的列标题,dataIndex绑定字段与store中fields配置字段的对应。
数据获取var store = Ext.create('Ext.data.Store',{
id:'store',
fields:["UUID","NAME","TEACHERID","COURSE_START_TIME","COURSE_END_TIME","BARCODE",
"MODIFIER"],
pageSize : 25, //每页显示条数
proxy:{
type: 'ajax',
limitParam:'pageSize', // 每页显示条数
pageParam:'pageNo', // 那一页
url : '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceLoad.json',
reader: { //这里的reader为数据存储组织的地方,下面的配置是为json格式的数据,例如:[{"total":50,"rows":[{"a":"3","b":"4"}]}]
type: 'json', //返回数据类型为json格式
rootProperty: 'TemporaryAttendance.result', //数据
totalProperty: 'TemporaryAttendance.totalCount' //数据总条数
}
},
autoLoad:true
});
四、选中行
1、选中行点击事件
listeners: { 'itemclick': function (view, record, item, index, e) {
Ext.MessageBox.alert("标题",record.data.cataId);
}
2、外部操作选中行
function showAlert (){
var selectedData=grid.getSelectionModel().getSelection()[0].data;
Ext.MessageBox.alert("标题",selectedData.cataId);
}
3、外部操作多行选中
var rows = grid.getView().getSelectionModel().getSelection();
var msg = "";
for (var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('cataId') + ',';
}
五、列数据格式
1、时间
{ text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
2、金钱
{ text: '订单金额', dataIndex: 'oprice',align:'right', xtype:'numbercolumn',format:'0,000.00'},
3、多字段组合
复制代码
{ text: '毛利率', dataIndex: 'sPrice', minWidth: 20,
renderer: function(v, m, r){
var puprsaleprice = r.get("sPrice") * r.get("puprsalepricetax")/(1+r.get("puprsalepricetax"));
var puprtaxprice = r.get("cPrice") * r.get("puprtax")/(1+r.get("puprtax"));
//var maoprice = (r.get("sprice") - r.get("cprice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sprice") * r.get("fpoint"))/r.get("sprice");
var maoprice = (r.get("sPrice") - r.get("cPrice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sPrice") * r.get("fpoint"))/(r.get("sPrice") / (1+r.get("puprsalepricetax")));
return (maoprice * 100).toFixed(2) + '%';
}},
复制代码
六、Grid数据刷新
1、不传参刷新当前数据
store.load();
2、传参刷新数据
store.load({ params: { Id: 123} });