Ext Grid 行变色,grid值修改,列变色,删除行。

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])

}

此代码是实现删除选中的行。

相关推荐