`
dowhathowtodo
  • 浏览: 779172 次
文章分类
社区版块
存档分类
最新评论

ExtJS4学习笔记(十七)---锁定表头(Locking Grid)功能

 
阅读更多

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

JS代码：

  1. Ext.require([
  2. 'Ext.grid.*',
  3. 'Ext.data.*',
  4. 'Ext.util.*',
  5. 'Ext.state.*'
  6. ]);

  8. Ext.onReady(function(){
  9. Ext.QuickTips.init();

  11. //samplestaticdataforthestore
  12. varmyData=[
  13. ['3mCo',71.72,0.02,0.03,'9/112:00am'],
  14. ['AlcoaInc',29.01,0.42,1.47,'9/112:00am'],
  15. ['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'],
  16. ['AmericanExpressCompany',52.55,0.01,0.02,'9/112:00am'],
  17. ['AmericanInternationalGroup,Inc.',64.13,0.31,0.49,'9/112:00am'],
  18. ['AT&TInc.',31.61,-0.48,-1.54,'9/112:00am'],
  19. ['BoeingCo.',75.43,0.53,0.71,'9/112:00am'],
  20. ['CaterpillarInc.',67.27,0.92,1.39,'9/112:00am'],
  21. ['Citigroup,Inc.',49.37,0.02,0.04,'9/112:00am'],
  22. ['E.I.duPontdeNemoursandCompany',40.48,0.51,1.28,'9/112:00am'],
  23. ['ExxonMobilCorp',68.1,-0.43,-0.64,'9/112:00am'],
  24. ['GeneralElectricCompany',34.14,-0.08,-0.23,'9/112:00am'],
  25. ['GeneralMotorsCorporation',30.27,1.09,3.74,'9/112:00am'],
  26. ['Hewlett-PackardCo.',36.53,-0.03,-0.08,'9/112:00am'],
  27. ['HoneywellIntlInc',38.77,0.05,0.13,'9/112:00am'],
  28. ['IntelCorporation',19.88,0.31,1.58,'9/112:00am'],
  29. ['InternationalBusinessMachines',81.41,0.44,0.54,'9/112:00am'],
  30. ['Johnson&Johnson',64.72,0.06,0.09,'9/112:00am'],
  31. ['JPMorgan&Chase&Co',45.73,0.07,0.15,'9/112:00am'],
  32. ['McDonald\'sCorporation',36.76,0.86,2.40,'9/112:00am'],
  33. ['Merck&Co.,Inc.',40.96,0.41,1.01,'9/112:00am'],
  34. ['MicrosoftCorporation',25.84,0.14,0.54,'9/112:00am'],
  35. ['PfizerInc',27.96,0.4,1.45,'9/112:00am'],
  36. ['TheCoca-ColaCompany',45.07,0.26,0.58,'9/112:00am'],
  37. ['TheHomeDepot,Inc.',34.64,0.35,1.02,'9/112:00am'],
  38. ['TheProcter&GambleCompany',61.91,0.01,0.02,'9/112:00am'],
  39. ['UnitedTechnologiesCorporation',63.26,0.55,0.88,'9/112:00am'],
  40. ['VerizonCommunications',35.57,0.39,1.11,'9/112:00am'],
  41. ['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am']
  42. ];

  44. /**
  45. *Customfunctionusedforcolumnrenderer
  46. *@param{Object}val
  47. */
  48. functionchange(val){
  49. if(val>0){
  50. return'<spanstyle="color:green;">'+val+'</span>';
  51. }elseif(val<0){
  52. return'<spanstyle="color:red;">'+val+'</span>';
  53. }
  54. returnval;
  55. }

  57. /**
  58. *Customfunctionusedforcolumnrenderer
  59. *@param{Object}val
  60. */
  61. functionpctChange(val){
  62. if(val>0){
  63. return'<spanstyle="color:green;">'+val+'%</span>';
  64. }elseif(val<0){
  65. return'<spanstyle="color:red;">'+val+'%</span>';
  66. }
  67. returnval;
  68. }

  70. //createthedatastore
  71. varstore=Ext.create('Ext.data.ArrayStore',{
  72. fields:[
  73. {name:'company'},
  74. {name:'price',type:'float'},
  75. {name:'change',type:'float'},
  76. {name:'pctChange',type:'float'},
  77. {name:'lastChange',type:'date',dateFormat:'n/jh:ia'}
  78. ],
  79. data:myData
  80. });

  82. //createtheGrid
  83. vargrid=Ext.create('Ext.grid.Panel',{
  84. store:store,
  85. columnLines:true,
  86. columns:[{
  87. text:'Company',
  88. locked:true,
  89. width:200,
  90. sortable:false,
  91. dataIndex:'company'
  92. },{
  93. text:'Price',
  94. width:125,
  95. sortable:true,
  96. renderer:'usMoney',
  97. dataIndex:'price'
  98. },{
  99. text:'Change',
  100. width:125,
  101. sortable:true,
  102. renderer:change,
  103. dataIndex:'change'
  104. },{
  105. text:'%Change',
  106. width:125,
  107. sortable:true,
  108. renderer:pctChange,
  109. dataIndex:'pctChange'
  110. },{
  111. text:'LastUpdated',
  112. width:135,
  113. sortable:true,
  114. renderer:Ext.util.Format.dateRenderer('m/d/Y'),
  115. dataIndex:'lastChange'
  116. }],
  117. height:350,
  118. width:600,
  119. title:'LockingGridColumn',
  120. renderTo:'grid-example',
  121. viewConfig:{
  122. stripeRows:true
  123. }
  124. });
  125. });

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

HTML代码：

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

最后要注意的是，引人的CSS文件和JS文件一定要注意路径。


分享到：
| ExtJS4学习笔记(十六)---上传文件(upload)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics