Extjs4 Study Notes (17th)-lock the header (locking grid) Function

In exjts4, we can lock the header (locking grid. The instance enables the grid to lock the table header. The locked columns are fixed (if there is a horizontal scroll bar ). The locked Column cannot be removed. For convenience, some local data is constructed as test data.

JS Code:

 

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. // Sample static data for the store
12. VaR mydata = [
13. ['3 M co', 71.72, 0.02, 0.03, '2017 am '],
14. ['Alcoa inc', 29.01, 0.42, 1.47, '2017 am '],
15. ['Altria group inc', 83.81, 0.28, 0.34, '2017 am '],
16. ['American express company ', 52.55, 0.01, 0.02, '2017 am'],
17. ['American International Group, Inc. ', 64.13, 0.31, 0.49, '2017 am'],
18. ['At & T Inc. ', 31.61,-0.48,-1.54, '2017 am'],
19. ['Boeing Co. ', 75.43, 0.53, 0.71, '2017 am'],
20. ['Caterpillar Inc. ', 67.27, 0.92, 1.39, '2017 am'],
21. ['Citigroup, Inc. ', 49.37, 0.02, 0.04, '2017 am'],
22. ['E. I. Du Pont de Nemours and company', 40.48, 0.51, 1.28, '2017 am '],
23. ['Exxon Mobil Corp ', 68.1,-0.43,-0.64, '2017 am'],
24. ['General Electric Company ', 34.14,-0.08,-0.23, '2017 am'],
25. ['General Motors Corporation ', 30.27, 1.09, 3.74, '2017 am'],
26. ['Hewlett-Packard Co. ', 36.53,-0.03,-0.08, '2017 am'],
27. ['Honeywell Intl inc', 38.77, 0.05, 0.13, '2017 am '],
28. ['Intel Corporation ', 19.88, 0.31, 1.58, '2017 am'],
29. ['International business machines ', 81.41, 0.44, 0.54, '2017 am'],
30. ['Johnson & Johnson ', 64.72, 0.06, 0.09, '2017 am'],
31. ['Jp Morgan & Chase & co', 45.73, 0.07, 0.15, '2017 am '],
32. ['Mcdonald \'s Corporation ', 36.76, 0.86, 2.40, '2017 am'],
33. ['Merck & Co., Inc. ', 40.96, 0.41, 1.01, '2017 am'],
34. ['Microsoft origin', 25.84, 0.14, 0.54, '2017 am '],
35. ['Pfizer inc', 27.96, 0.4, 1.45, '2017 am '],
36. ['The Coca-Cola Company ', 45.07, 0.26, 0.58, '2017 am'],
37. ['The Home Depot, Inc. ', 34.64, 0.35, 1.02, '2017 am'],
38. ['The Procter & Gamble Company ', 61.91, 0.01, 0.02, '2017 am'],
39. ['United Technologies Corporation ', 63.26, 0.55, 0.88, '2017 am'],
40. ['Verizon communications ', 35.57, 0.39, 1.11, '2017 am'],
41. ['Wal-Mart stores, Inc. ', 45.45, 0.73, 1.63, '2017 am']
42. ];
44. /**
45. * Custom function used for column Renderer
46. * @ Param {object} Val
47. */
48. Function Change (VAL ){
49. If (Val> 0 ){
50. Return '<span style = "color: green;">' + Val + '</span> ';
51. } Else if (Val <0 ){
52. Return '<span style = "color: red;">' + Val + '</span> ';
53. }
54. Return val;
55. }
57. /**
58. * Custom function used for column Renderer
59. * @ Param {object} Val
60. */
61. Function pctchange (VAL ){
62. If (Val> 0 ){
63. Return '<span style = "color: green;">' + Val + '% </span> ';
64. } Else if (Val <0 ){
65. Return '<span style = "color: red;">' + Val + '% </span> ';
66. }
67. Return val;
68. }
70. // Create the Data Store
71. VaR store = ext. Create ('ext. Data. arraystore ',{
72. Fields :[
73. {Name: 'company '},
74. {Name: 'price', type: 'float '},
75. {Name: 'change', type: 'float '},
76. {Name: 'pctchang', type: 'float '},
77. {Name: 'lastchang', type: 'date', dateformat: 'n'/j h: '}
78. ],
79. Data: mydata
80. });
82. // Create the grid
83. VaR grid = 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: 'pctchang'
110. },{
111. Text: 'Last updated ',
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: 'locking grid column ',
120. Renderto: 'grid-example ',
121. Viewconfig :{
122. Striperows: True
123. }
124. });
125. });

Save this code as: locking-grid.js. Because the Code renders the grid to a container with ID: Grid-example, we need to write a DIV in the HTML page to place the grid.

HTML code:

 

1. <! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
2. <HTML>
3. <Head>
4. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
5. <Title> locking grid column example </title>
6. <LINK rel = "stylesheet" type = "text/CSS" href = "../resources/CSS/ext-all.css"/>
7. <LINK rel = "stylesheet" type = "text/CSS" href = "../shared/example.css"/>
8. <SCRIPT type = "text/JavaScript" src = "..././Bootstrap. js"> </SCRIPT>
9. <SCRIPT type = "text/JavaScript" src = "locking-grid.js"> </SCRIPT>
10. </Head>
11. <Body>
12. <Div id = "Grid-Example"> </div>
13. </Body>
14. </Html>

Note that you must pay attention to the path for leading CSS and JS files.