Ext Grid 行变色，grid值修改，列变色，删除行。
goodyatou 2011-08-06
html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk">
<title>GridPluginsExample</title>
<linkrel="stylesheet"type="text/css"href="../../../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../../ext-all.js"></script>
<styletype="text/css">
body.x-panel{
margin-bottom:20px;
}
.icon-grid{
background-image:url(../shared/icons/fam/grid.png)!important;
}
#button-grid.x-panel-body{
border:1pxsolid#99bbe8;
border-top:0none;
}
.add{
background-image:url(../shared/icons/fam/add.gif)!important;
}
.option{
background-image:url(../shared/icons/fam/plugin.gif)!important;
}
.remove{
background-image:url(../shared/icons/fam/delete.gif)!important;
}
.save{
background-image:url(../shared/icons/save.gif)!important;
}
.x-grid3-row-alt{
background-image:none;
background-color:#F4FAFF;
}
</style>
</head>
<body>
<divid="grid-div"style="margin-top:100px;"></div>
</body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
varxg=Ext.grid;
//sharedreader
varreader=newExt.data.ArrayReader({},[
{name:'company'},
{name:'price',type:'float'},
{name:'change',type:'float'},
{name:'pctChange',type:'float'},
{name:'lastChange',type:'date',dateFormat:'n/jh:ia'},
{name:'industry'},
{name:'desc'}
]);
varsm2=newxg.CheckboxSelectionModel({//全选
listeners:{
selectionchange:function(sm){
if(sm.getCount()){
grid4.removeButton.enable();
}else{
grid4.removeButton.disable();
}
}
}
});
vargrid4=newxg.GridPanel({
id:'button-grid',
store:newExt.data.Store({
reader:reader,
data:xg.dummyData
}),
cm:newxg.ColumnModel([
sm2,
{id:'company',header:"Company",width:40,sortable:true,dataIndex:'company'},
{header:"Price",width:20,sortable:true,renderer:Ext.util.Format.usMoney,dataIndex:'price'},
{header:"Change",width:20,sortable:true,css:'background:#FF0000;',dataIndex:'change'},
{header:"%Change",width:20,sortable:true,dataIndex:'pctChange'},
{header:"LastUpdated",width:20,sortable:true,renderer:Ext.util.Format.dateRenderer('m/d/Y'),dataIndex:'lastChange'}
]),
sm:sm2,
viewConfig:{
forceFit:true
},
columnLines:true,
//inlinebuttons
buttons:[{text:'Save',
handler:function(){
Ext.MessageBox.show({
title:'提示',
msg:'你点击了我！',
buttons:Ext.MessageBox.OK,
fn:function(){Ext.MessageBox.alert("ssss","fffsss")},
icon:Ext.MessageBox.INFO
});
}},{text:'Cancel'}],
buttonAlign:'center',
//inlinetoolbars
tbar:[{
text:'AddsssSomething',
tooltip:'Addanewrow',
iconCls:'add',
ref:'../addButton',
handler:function(){
Ext.MessageBox.alert("测试","添加");
}
},'-',{
text:'Removesss',
tooltip:'Removetheselecteditem',
iconCls:'remove',
//PlaceareferenceintheGridPanel
ref:'../removeButton',
handler:function(){
Ext.MessageBox.confirm("删除","您确定要删除吗?",showResult)
},
disabled:true
},'-',{
text:'Moidfy',
tooltip:'Modifytheselecteditem',
iconCls:'option',
handler:function(){
varcell=grid4.getSelectionModel().getSelections();
if(cell==null||cell.length<1){
Ext.MessageBox.alert("温馨提示","请您选择要修改的选项");
returnfalse;
}
Ext.MessageBox.confirm("修改","您确定要修改吗？",modifyResult)
}
}],
stripeRows:true,//实现斑马线，行换色。
width:600,
height:300,
frame:true,
title:'SupportforstandardPanelfeaturessuchasframing,buttonsandtoolbars',
iconCls:'icon-grid',
renderTo:'grid-div'
});
functionshowResult(btn){
varcell=grid4.getSelectionModel().getSelections();
if(btn=="yes"){
varstore=grid4.getStore();
for(vari=0;i<cell.length;i++){
store.remove(cell[i])
}
}
}
functionmodifyResult(btn){
varcell=grid4.getSelectionModel().getSelections();
if(btn=="yes"){
for(vari=0;i<cell.length;i++){
cell[i].set('company',i);
cell[i].commit();
}
}
}
});
//Arraydataforthegrids
Ext.grid.dummyData=[
['3mCo',71.72,0.02,0.03,'9/112:00am','Manufacturing'],
['AlcoaInc',29.01,0.42,1.47,'9/112:00am','Manufacturing'],
['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am','Manufacturing'],
['AmericanExpressCompany',52.55,0.01,0.02,'9/112:00am','Finance'],
['AmericanInternationalGroup,Inc.',64.13,0.31,0.49,'9/112:00am','Services'],
['AT&TInc.',31.61,-0.48,-1.54,'9/112:00am','Services'],
['BoeingCo.',75.43,0.53,0.71,'9/112:00am','Manufacturing']
];
</script>
</html>
说明：1，x-grid3-row-alt{
background-image:none;
background-color:#F4FAFF;
}
此代码是设置斑马线行颜色。
2，css:'background:#FF0000;'
此代码是设置列颜色。
3，varcell=grid4.getSelectionModel().getSelections();
if(btn=="yes"){
for(vari=0;i<cell.length;i++){
cell[i].set('company',i);//修改company的值
cell[i].commit();
}
}
此代码是实现值修改。
4，varstore=grid4.getStore();//删除选中的行
for(vari=0;i<cell.length;i++){
store.remove(cell[i])
}
此代码是实现删除选中的行。
