一:grid中的selModel三种选择模型:
RowSelectionModel:
var sr=new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
rowselect: function(sm, row, rec) {
// alert(rec.get('deptno'));
// store2.removeAll();
var n=rec.get('deptno');
store2.baseParams={deptno:n};
store2.load({params:{start:0,limit:1}});
}
}
});
CheckSelectionModel:
var chbox=new Ext.grid.CheckboxSelectionModel();
注意chbox,它是个复选框,不但要在grid里面配置sm,还要在columnModel中配置一列.且要是同一个。而RowSelectionModel则只要在grid配置sm即可.
还有CellSelectionModel也差不多.
二:CoumnModel:
dataIndex对应的是store中的各个列,是你命名的,而不是后台mapping的那个值,renderer是指在当你要渲染这列的时候,则会先调用所指定的函数,
例如:
renderer:function(val){
return '$'+val;
}
这就会变成这列里面的每个值的前面都会带个$,但是注意它的值还是store里面对应的,而不会有带$
以下是关于grid的例子:
var path = '/My_ExtJs';
Ext.onReady(function() {
Ext.QuickTips.init();
var myReader = new Ext.data.JsonReader( {
idProperty : 'DEPTNO',
root : 'data',
totalProperty : 'total_num',//总记录数
fields : [ {
name : 'mid',
mapping : 'DEPTNO'
}, {
name : 'name',
mapping : 'DNAME'
}, {
name : 'job',
mapping : 'LOC'
} ]
});
// Ext.data.Api.actions['read'] = 'load';
// var myStore = new Ext.data.Store( {
// reader : myReader,
// proxy : new Ext.data.HttpProxy( {
// api : {
// 'load' : {
// 'method' : 'GET',
// url : path + '/servlet/My_Servlet'
// }
// }
// })
// });
var myStore = new Ext.data.Store( {
reader : myReader,
proxy : new Ext.data.HttpProxy( {
method : 'GET',
url : path + '/servlet/My_Servlet'
})
});
var grid = new Ext.grid.EditorGridPanel( {
store : myStore,
loadMask: true,// 必须grid先于load
height : 300,
width : 700,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
colModel : new Ext.grid.ColumnModel( {
defaults : {
width : 120,
header : '选项'
},
title : 'Json',
columns : [
new Ext.grid.RowNumberer(), //行号
{
id : 'mid',
sortable : true,
dataIndex : 'mid'
}, {
header : '姓名',
dataIndex : 'name',
align : 'right'
}, {
header : '改变',
dataIndex : 'job',
align : 'right',
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header : '操作',
xtype: 'actioncolumn',
width: 100,
align : 'center',
items: [{
icon : '../shared/icons/fam/delete.gif',
handler: function(g,rowIndex,colIndex,item,evt){
var rs = g.getStore().getAt(rowIndex);
//遮盖,主要是通过gridView来操作
g.rsLoadMask = new Ext.LoadMask(g.getView().getRow(rowIndex),{msg: "正在更新数据..."});
g.rsLoadMask.show();
Ext.Ajax.request({
url: g.getStore().proxy.api['load'].url,
method: 'GET',
params: {'job': rs.get('job')},
callback: function(op,success,resp){
g.rsLoadMask.hide();
Ext.MessageBox.alert("提示",Ext.util.JSON.decode(resp.responseText)['msg'],function(){
rs.commit();//单条记录提交
// rs.reject();//返回修改之前的那一条
// g.getStore.commitChanges();//提交全部修改的
// g.getStore.rejectChanges();//返回修改之前的全部的
});
}
});
}
},{
icon : '../shared/icons/fam/accept.png',
handler: function(g,rowIndex,colIndex,item,evt){
var rs = g.getStore().getAt(rowIndex);
g.rsLoadMask = new Ext.LoadMask(g.bwrap,{msg: "请等待..."});
g.rsLoadMask.show();
Ext.Ajax.request({
url: g.getStore().proxy.api['load'].url,
method: 'GET',
params: {'job': rs.get('job')},
callback: function(op,success,resp){
g.rsLoadMask.hide();
Ext.MessageBox.alert("提示",Ext.util.JSON.decode(resp.responseText)['msg'],function(){
g.getStore().remove(rs);
});
}
});
}
}]
} ]
}),
tbar : new Ext.PagingToolbar( {
pageSize : 5,
store : myStore,
displayInfo : true,
displayMsg : '显示 {0} - {1} 总记录数 {2}',
emptyMsg : "无数据"
})
});
grid.render("d");
myStore.load();
// myStore.loadData(d);
});