学习总结之Grid定制列模型
/*
* 这是一个定制列显示数据的例子，列名性别，年龄，生日分别用到renderer渲染器，我对渲染函数function（v）{return v}函数的理解是
* 根据组件当前的的value值即参数v作为判断条件，给他的值加上一些css样式。
*/
//声明一个Ext.form变量
var fm = Ext.form;
var sm=new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});
//构造列 模型
var cm = new Ext.grid.ColumnModel([
sm,{
header:'ID',
dataIndex:'id',
width:40
},{
header: "姓名",
dataIndex: 'name',
editor: new fm.TextField({
allowBlank: false
})
},{
header:'性别',
dataIndex:'sex',
width:60,
align:'center',
renderer:function(v){
return '<img src="../images/'+v+'.png"/>'+(v=='m'?'男':'女');
},
editor:new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
allowBlank:false,
mode: 'local',
readOnly:true,
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['m','男'],
['f','女']
]
}),
valueField: 'value',
displayField: 'text'
})
},{
header:'年龄',
dataIndex:'age',
width:50,
align:'right',
renderer:function(v){
var code = '<span style="color:';
if(v<=25){
code += '#008000';
}else if(v>25 && v<=30){
code += '#CC6600';
}else if(v>30){
code += '#804000';
}
return code+';">'+v+'</span>';
},
editor: new fm.NumberField({
allowBlank:false,
allowNegative: false,
allowDecimals: false,
maxValue:60,
minValue:18
})
},{
header: "生日",
dataIndex: 'birth',
renderer: function(v){
return v ? v.dateFormat('Y年m月d日') : '';
},
editor: new fm.DateField({
format: 'Y-m-d',
minValue: '1800-01-01',
readOnly:true,
disabledDays: [0, 6],
disabledDaysText: '请不要选择周末'
})
}
]);//构造完毕
//cm.defaultSortable = true;//默认类排序
//构造数据模型record
/*var cm = new Ext.grid.ColumnModel({
columns : [{
header : '88',
dataIndex : 'id'
}, {
header : "88",
dataIndex : 'userPass'
}]
});
*/
var _employee = new Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'sex',type: 'string'},
{name: 'age',type:'int'},
{name: 'birth', type: 'date', dateFormat: 'Y-m-d'}
]);
// 构造存储器store
var store = new Ext.data.JsonStore({
url : '../myjsp/EmployeeManage.jsp',
baseParams:{command:'query',sqlstring:"select * from employee"},
root : 'Members',
totalProperty:'count',
fields: _employee,
autoLoad : false
});
Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
constructor : function(_cfg) {
Ext.apply(this, _cfg);
var _g = this;
Grid1.superclass.constructor.call(this, {
width : 600,
height : 800,
title : '表格',
frame : true,
loadMask : true,
//stripeRows : true,
renderTo : Ext.getBody(),
listeners : {// 'activate':function(){
'render' : function() {
alert("startff");
}
}
});
}
// ,
});
Ext.onReady(function() {
var g = new Grid1({
cm : cm,
store : store
});
//alert(sm1 + "---" + g.cm + "--" + g.sm + "---" + g.store);
store.load({});
//g.store.load();
});
