<!--StartFragment -->
1.'checkcolumn'的使用,0,1,true,false
{
xtype: 'checkcolumn',
header: '数据库',
dataIndex: 'n',
stopSelection : false,
width: 60,
cls: 'x-grid-checkheader-editor',
defaultType: 'boolean',
disabled:true,
checked: '{n}'
},
xtype: 'checkcolumn',
header: '数据库',
dataIndex: 'n',
stopSelection : false,
width: 60,
cls: 'x-grid-checkheader-editor',
defaultType: 'boolean',
disabled:true,
checked: '{n}'
},
2.gridpanel 列头颜色的修改
listeners : {
'afterrender' : function(grid) {
var elments = Ext.select("div[id="+grid.getId()+"] .x-column-header",true);//.x-grid3-hd
elments.each(function(el) {
el.setStyle("color", 'green');
el.setStyle("background", '#ff0000');
}, this);
}
}
'afterrender' : function(grid) {
var elments = Ext.select("div[id="+grid.getId()+"] .x-column-header",true);//.x-grid3-hd
elments.each(function(el) {
el.setStyle("color", 'green');
el.setStyle("background", '#ff0000');
}, this);
}
}
3. cell style
.price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":" lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":" bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":" home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":" marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":" lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":" bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":" home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":" marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,
viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
renderTo: Ext.getBody()
});
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,
viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
renderTo: Ext.getBody()
});