ExtJS4学习笔记(十七)---锁定表头(Locking Grid)功能-优快云博客

Exjts4中，我们可以实现锁定表头(Locking Grid)能。实例实现了Grid锁定表头的功能，被锁定的列是固定不动的(如果有横向滚动条的话)。被锁定的列也无法被移除。为了方便，构造了一些本地数据作为测试数据。

JS代码：

Ext.require([ 
 'Ext.grid.*',  
 'Ext.data.*',  
 'Ext.util.*',  
 'Ext.state.*' 
]); 
 
 Ext.onReady(function(){  
Ext.QuickTips.init(); 
 
 //samplestaticdataforthestore 
 varmyData=[  
 ['3mCo',71.72,0.02,0.03,'9/112:00am'], 
 ['AlcoaInc',29.01,0.42,1.47,'9/112:00am'], 
 ['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'], 
 ['AmericanExpressCompany',52.55,0.01,0.02,'9/112:00am'], 
 ['AmericanInternationalGroup,Inc.',64.13,0.31,0.49,'9/112:00am'], 
 ['AT&TInc.',31.61,-0.48,-1.54,'9/112:00am'], 
 ['BoeingCo.',75.43,0.53,0.71,'9/112:00am'], 
 ['CaterpillarInc.',67.27,0.92,1.39,'9/112:00am'], 
 ['Citigroup,Inc.',49.37,0.02,0.04,'9/112:00am'], 
 ['E.I.duPontdeNemoursandCompany',40.48,0.51,1.28,'9/112:00am'], 
 ['ExxonMobilCorp',68.1,-0.43,-0.64,'9/112:00am'], 
 ['GeneralElectricCompany',34.14,-0.08,-0.23,'9/112:00am'], 
 ['GeneralMotorsCorporation',30.27,1.09,3.74,'9/112:00am'], 
 ['Hewlett-PackardCo.',36.53,-0.03,-0.08,'9/112:00am'], 
 ['HoneywellIntlInc',38.77,0.05,0.13,'9/112:00am'], 
 ['IntelCorporation',19.88,0.31,1.58,'9/112:00am'], 
 ['InternationalBusinessMachines',81.41,0.44,0.54,'9/112:00am'], 
 ['Johnson&Johnson',64.72,0.06,0.09,'9/112:00am'], 
 ['JPMorgan&Chase&Co',45.73,0.07,0.15,'9/112:00am'], 
 ['McDonald\'sCorporation',36.76,0.86,2.40,'9/112:00am'], 
 ['Merck&Co.,Inc.',40.96,0.41,1.01,'9/112:00am'], 
 ['MicrosoftCorporation',25.84,0.14,0.54,'9/112:00am'], 
 ['PfizerInc',27.96,0.4,1.45,'9/112:00am'], 
 ['TheCoca-ColaCompany',45.07,0.26,0.58,'9/112:00am'], 
 ['TheHomeDepot,Inc.',34.64,0.35,1.02,'9/112:00am'], 
 ['TheProcter&GambleCompany',61.91,0.01,0.02,'9/112:00am'], 
 ['UnitedTechnologiesCorporation',63.26,0.55,0.88,'9/112:00am'], 
 ['VerizonCommunications',35.57,0.39,1.11,'9/112:00am'], 
 ['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am'] 
]; 
 
 /**  
*Customfunctionusedforcolumnrenderer 
*@param{Object}val 
 */ 
 functionchange(val){  
 if(val>0){ 
 return'<spanstyle="color:green;">'+val+'</span>'; 
 }elseif(val<0){ 
 return'<spanstyle="color:red;">'+val+'</span>'; 
} 
 returnval;  
} 
 
 /**  
*Customfunctionusedforcolumnrenderer 
*@param{Object}val 
 */ 
 functionpctChange(val){ 
 if(val>0){  
 return'<spanstyle="color:green;">'+val+'%</span>'; 
 }elseif(val<0){ 
 return'<spanstyle="color:red;">'+val+'%</span>'; 
} 
 returnval; 
} 
 
 //createthedatastore  
 varstore=Ext.create('Ext.data.ArrayStore',{ 
fields:[ 
 {name:'company'}, 
 {name:'price',type:'float'}, 
 {name:'change',type:'float'}, 
 {name:'pctChange',type:'float'}, 
 {name:'lastChange',type:'date',dateFormat:'n/jh:ia'} 
], 
data:myData 
}); 
 
 //createtheGrid  
 vargrid=Ext.create('Ext.grid.Panel',{ 
store:store, 
 columnLines:true, 
columns:[{ 
 text:'Company', 
 locked:true,  
width:200, 
 sortable:false, 
 dataIndex:'company' 
},{ 
 text:'Price', 
width:125, 
 sortable:true, 
 renderer:'usMoney', 
 dataIndex:'price' 
},{ 
 text:'Change', 
width:125, 
 sortable:true, 
renderer:change, 
 dataIndex:'change' 
},{ 
 text:'%Change', 
width:125, 
 sortable:true, 
renderer:pctChange, 
 dataIndex:'pctChange' 
},{ 
 text:'LastUpdated', 
width:135, 
 sortable:true, 
 renderer:Ext.util.Format.dateRenderer('m/d/Y'), 
 dataIndex:'lastChange' 
}], 
height:350, 
width:600, 
 title:'LockingGridColumn', 
 renderTo:'grid-example', 
viewConfig:{ 
 stripeRows:true 
} 
}); 
}); 

将此代码另存为：locking-grid.js。因为代码中将Grid渲染到了一个id为：grid-example的容器中，所以我们的HTML页面里，要写一个DIV来放置此Grid。

HTML代码：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>LockingGridColumnExample</title> 
 <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/> 
 <linkrel="stylesheet"type="text/css"href="../shared/example.css"/> 
 <scripttype="text/javascript"src="../../bootstrap.js"></script> 
 <scripttype="text/javascript"src="locking-grid.js"></script> 
</head> 
<body> 
 <divid="grid-example"></div> 
</body> 
</html>