ext grid无法显示的解决方案

最新推荐文章于 2019-04-17 18:49:59 发布

longyuan20102011

最新推荐文章于 2019-04-17 18:49:59 发布

阅读量1k

点赞数

分类专栏： ext 文章标签： ext header licensing microsoft function verizon

本文链接：https://blog.csdn.net/longyuan20102011/article/details/7939507

版权

ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在我们的项目中，大家经常都会用到网格(Grids)来展示数据。
我们经常要面对的问题就是，可以按每一列排序，表头固定不动，内容可以滚动等等。
在引入了ExtJs后，这些就不再需要我们来完成了。大家看下面这张效果图：

演示(demo)地址在文章最后.

效果图如下:

用到的有两个文件array-grid.html和array-grid.js。如果没有特别声明，.html跟.js文件名是一样的。

array-grid.html

 
   01. 
   <html> 
  
   02. 
   <head> 
  
   03. 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  
   04. 
   <title>Array Grid Example</title> 
  
   05. 
     
   06. 
   <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
  
   07. 
     
   08. 
   <!-- GC --> 
  
   09. 
   <!-- LIBS --> 
  
   10. 
   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
  
   11. 
   <!-- ENDLIBS --> 
  
   12. 
     
   13. 
   <script type="text/javascript" src="../../ext-all.js"></script> 
  
   14. 
     
   15. 
   <script type="text/javascript" src="array-grid.js"></script> 
  
   16. 
   <link rel="stylesheet" type="text/css" href="grid-examples.css" /> 
  
   17. 
     
   18. 
   <!-- Common Styles for the examples --> 
  
   19. 
   <link rel="stylesheet" type="text/css" href="../examples.css" /> 
  
   20. 
   </head> 
  
   21. 
   <body> 
  
   22. 
   <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --> 
  
   23. 
   <h1>Array Grid Example</h1> 
  
   24. 
   <p>This example shows how to create a grid from Array data.</p> 
  
   25. 
   <p>Note that the js is not minified so it is readable. 
  
   26. 
   See <a href="array-grid.js">array-grid.js</a>.</p> 
  
   27. 
     
   28. 
   <div id="grid-example"></div> 
  
   29. 
   </body> 
  
   30. 
   </html>

array-grid.js

 
   01. 
   /* 
  
   02. 
   * Ext JS Library 2.0.2 
  
   03. 
   * Copyright(c) 2006-2008, Ext JS, LLC. 
  
   04. 
   * licensing＠extjs.com 
  
   05. 
   * 
  
   06. 
   * extjs.com/license 
  
   07. 
   */ 
  
   08. 
     
   09. 
   Ext.onReady(function(){ 
  
   10. 
     
   11. 
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
  
   12. 
     
   13. 
   var myData = [ 
  
   14. 
   ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], 
  
   15. 
   ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], 
  
   16. 
   ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], 
  
   17. 
   ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], 
  
   18. 
   ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], 
  
   19. 
   ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], 
  
   20. 
   ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], 
  
   21. 
   ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], 
  
   22. 
   ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], 
  
   23. 
   ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], 
  
   24. 
   ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], 
  
   25. 
   ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], 
  
   26. 
   ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], 
  
   27. 
   ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], 
  
   28. 
   ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], 
  
   29. 
   ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], 
  
   30. 
   ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], 
  
   31. 
   ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], 
  
   32. 
   ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], 
  
   33. 
   ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], 
  
   34. 
   ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], 
  
   35. 
   ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], 
  
   36. 
   ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], 
  
   37. 
   ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], 
  
   38. 
   ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], 
  
   39. 
   ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], 
  
   40. 
   ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], 
  
   41. 
   ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], 
  
   42. 
   ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] 
  
   43. 
   ]; 
  
   44. 
     
   45. 
   // example of custom renderer function 
  
   46. 
   function change(val){ 
  
   47. 
   if(val > 0){ 
  
   48. 
   return '<span style="color:green;">' + val + '</span>'; 
  
   49. 
   }else if(val < 0){ 
  
   50. 
   return '<span style="color:red;">' + val + '</span>'; 
  
   51. 
   } 
  
   52. 
   return val; 
  
   53. 
   } 
  
   54. 
     
   55. 
   // example of custom renderer function 
  
   56. 
   function pctChange(val){ 
  
   57. 
   if(val > 0){ 
  
   58. 
   return '<span style="color:green;">' + val + '%</span>'; 
  
   59. 
   }else if(val < 0){ 
  
   60. 
   return '<span style="color:red;">' + val + '%</span>'; 
  
   61. 
   } 
  
   62. 
   return val; 
  
   63. 
   } 
  
   64. 
     
   65. 
   // create the data store 
  
   66. 
   var store = new Ext.data.SimpleStore({ 
  
   67. 
   fields: [ 
  
   68. 
   {name: 'company'}, 
  
   69. 
   {name: 'price', type: 'float'}, 
  
   70. 
   {name: 'change', type: 'float'}, 
  
   71. 
   {name: 'pctChange', type: 'float'}, 
  
   72. 
   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
  
   73. 
   ] 
  
   74. 
   }); 
  
   75. 
   store.loadData(myData); 
  
   76. 
     
   77. 
   // create the Grid 
  
   78. 
   var grid = new Ext.grid.GridPanel({ 
  
   79. 
   store: store, 
  
   80. 
   columns: [ 
  
   81. 
   {id:'company',header: "Company", width: 160, sortable: true, dataIndex:'company'}, 
  
   82. 
   {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex:'price'}, 
  
   83. 
   {header: "Change", width: 75, sortable: true, renderer: change, dataIndex:'change'}, 
  
   84. 
   {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex:'pctChange'}, 
  
   85. 
   {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} 
  
   86. 
   ], 
  
   87. 
   stripeRows: true, 
  
   88. 
   autoExpandColumn: 'company', 
  
   89. 
   height:350, 
  
   90. 
   width:600, 
  
   91. 
   title:'Array Grid' 
  
   92. 
   }); 
  
   93. 
     
   94. 
   grid.render('grid-example'); 
  
   95. 
     
   96. 
   grid.getSelectionModel().selectFirstRow(); 
  
   97. 
   });

1 当时做的时候，我把array-grid.html和array-grid.js都在demo文件夹下面，无法显示，后来我仔细看了一下，

原来这连个文件夹都在examples文件夹下面

http://localhost:8088/test/ext/examples/grid/array-grid.html

longyuan20102011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext grid无法显示的解决方案

在我们的项目中，大家经常都会用到网格(Grids)来展示数据。我们经常要面对的问题就是，可以按每一列排序，表头固定不动，内容可以滚动等等。在引入了ExtJs后，这些就不再需要我们来完成了。大家看下面这张效果图：演示(demo)地址在文章最后.效果图如下:用到的有两个文件array-grid.html和array-grid.js。如果没有特别声明，.html跟.j
复制链接

扫一扫