Posted By

Jotape on 09/28/11


Tagged

extjs


Versions (?)

grid RowEditor


 / Published in: JavaScript
 

  1. <!--
  2. /*!
  3. * Ext JS Library 3.0.0
  4. * Copyright(c) 2006-2009 Ext JS, LLC
  5. * [email protected]
  6. * http://www.extjs.com/license
  7. */
  8. -->
  9. <html>
  10. <head>
  11. <title>Hello World Window</title>
  12. <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
  13. <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
  14. <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
  15. <script type="text/javascript" src="ext-3.0.0/examples/ux/RowEditor.js"></script>
  16.  
  17. </head>
  18.  
  19. <!-- Revised from demo code in ext3.0.0 -->
  20. <body>
  21. <script type="text/javascript">
  22. /*!
  23.  * Ext JS Library 3.0.0
  24.  * Copyright(c) 2006-2009 Ext JS, LLC
  25.  * [email protected]
  26.  * http://www.extjs.com/license
  27.  */
  28. Ext.onReady(function(){
  29. Ext.QuickTips.init();
  30.  
  31. var Employee = Ext.data.Record.create([{
  32. name: 'name',
  33. type: 'string'
  34. }, {
  35. name: 'email',
  36. type: 'string'
  37. }, {
  38. name: 'start',
  39. type: 'date',
  40. dateFormat: 'n/j/Y'
  41. },{
  42. name: 'salary',
  43. type: 'float'
  44. },{
  45. name: 'active',
  46. type: 'bool'
  47. }]);
  48.  
  49.  
  50. // hideous function to generate employee data
  51. var genData = function(){
  52. var data = [];
  53. var s = new Date(2007, 0, 1);
  54. var now = new Date(), i = -1;
  55. while(s.getTime() < now.getTime()){
  56. var ecount = Ext.ux.getRandomInt(0, 3);
  57. for(var i = 0; i < ecount; i++){
  58. var name = Ext.ux.generateName();
  59. data.push({
  60. start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
  61. name : name,
  62. email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
  63. active: true,
  64. salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
  65. });
  66. }
  67. s = s.add(Date.MONTH, 1);
  68. }
  69. return data;
  70. }
  71.  
  72.  
  73. var store = new Ext.data.GroupingStore({
  74. reader: new Ext.data.JsonReader({fields: Employee}),
  75. data: genData(),
  76. sortInfo: {field: 'start', direction: 'ASC'}
  77. });
  78.  
  79. var editor = new Ext.ux.grid.RowEditor({
  80. saveText: 'Update'
  81. });
  82.  
  83. var grid = new Ext.grid.GridPanel({
  84. store: store,
  85. width: 600,
  86. region:'center',
  87. margins: '0 5 5 5',
  88. autoExpandColumn: 'name',
  89. plugins: [editor],
  90. view: new Ext.grid.GroupingView({
  91. markDirty: false
  92. }),
  93. tbar: [{
  94. iconCls: 'icon-user-add',
  95. text: 'Add Employee',
  96. handler: function(){
  97. var e = new Employee({
  98. name: 'New Guy',
  99. email: '[email protected]',
  100. start: (new Date()).clearTime(),
  101. salary: 50000,
  102. active: true
  103. });
  104. editor.stopEditing();
  105. store.insert(0, e);
  106. grid.getView().refresh();
  107. grid.getSelectionModel().selectRow(0);
  108. editor.startEditing(0);
  109. }
  110. },{
  111. ref: '../removeBtn',
  112. iconCls: 'icon-user-delete',
  113. text: 'Remove Employee',
  114. disabled: true,
  115. handler: function(){
  116. editor.stopEditing();
  117. var s = grid.getSelectionModel().getSelections();
  118. for(var i = 0, r; r = s[i]; i++){
  119. store.remove(r);
  120. }
  121. }
  122. }],
  123.  
  124. columns: [
  125. new Ext.grid.RowNumberer(),
  126. {
  127. id: 'name',
  128. header: 'First Name',
  129. dataIndex: 'name',
  130. width: 220,
  131. sortable: true,
  132. editor: {
  133. xtype: 'textfield',
  134. allowBlank: false
  135. }
  136. },{
  137. header: 'Email',
  138. dataIndex: 'email',
  139. width: 150,
  140. sortable: true,
  141. editor: {
  142. xtype: 'textfield',
  143. allowBlank: false,
  144. vtype: 'email'
  145. }
  146. },{
  147. xtype: 'datecolumn',
  148. header: 'Start Date',
  149. dataIndex: 'start',
  150. format: 'm/d/Y',
  151. width: 100,
  152. sortable: true,
  153. groupRenderer: Ext.util.Format.dateRenderer('M y'),
  154. editor: {
  155. xtype: 'datefield',
  156. allowBlank: false,
  157. minValue: '01/01/2006',
  158. minText: 'Can\'t have a start date before the company existed!',
  159. maxValue: (new Date()).format('m/d/Y')
  160. }
  161. },{
  162. xtype: 'numbercolumn',
  163. header: 'Salary',
  164. dataIndex: 'salary',
  165. format: '$0,0.00',
  166. width: 100,
  167. sortable: true,
  168. editor: {
  169. xtype: 'numberfield',
  170. allowBlank: false,
  171. minValue: 1,
  172. maxValue: 150000
  173. }
  174. },{
  175. xtype: 'booleancolumn',
  176. header: 'Active',
  177. dataIndex: 'active',
  178. align: 'center',
  179. width: 50,
  180. trueText: 'Yes',
  181. falseText: 'No',
  182. editor: {
  183. xtype: 'checkbox'
  184. }
  185. }]
  186. });
  187.  
  188. var cstore = new Ext.data.JsonStore({
  189. fields:['month', 'employees', 'salary'],
  190. data:[],
  191. refreshData: function(){
  192. var o = {}, data = [];
  193. var s = new Date(2007, 0, 1);
  194. var now = new Date(), i = -1;
  195. while(s.getTime() < now.getTime()){
  196. var m = {
  197. month: s.format('M y'),
  198. employees: 0,
  199. salary: 0,
  200. index: ++i
  201. }
  202. data.push(m);
  203. o[m.month] = m;
  204. s = s.add(Date.MONTH, 1);
  205. }
  206. store.each(function(r){
  207. var m = o[r.data.start.format('M y')];
  208. for(var i = m.index, mo; mo = data[i]; i++){
  209. mo.employees += 10000;
  210. mo.salary += r.data.salary;
  211. }
  212. });
  213. this.loadData(data);
  214. }
  215. });
  216. cstore.refreshData();
  217. store.on('add', cstore.refreshData, cstore);
  218. store.on('remove', cstore.refreshData, cstore);
  219. store.on('update', cstore.refreshData, cstore);
  220.  
  221. var chart = new Ext.Panel({
  222. width:600,
  223. height:200,
  224. layout:'fit',
  225. margins: '5 5 0',
  226. region: 'north',
  227. split: true,
  228. minHeight: 100,
  229. maxHeight: 500,
  230.  
  231. items: {
  232. xtype: 'columnchart',
  233. store: cstore,
  234. url:'ext-3.0.0/resources/charts.swf',
  235. xField: 'month',
  236. yAxis: new Ext.chart.NumericAxis({
  237. displayName: 'Employees',
  238. labelRenderer : Ext.util.Format.numberRenderer('0,0')
  239. }),
  240. tipRenderer : function(chart, record, index, series){
  241. if(series.yField == 'salary'){
  242. return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
  243. }else{
  244. return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
  245. }
  246. },
  247.  
  248. // style chart so it looks pretty
  249. chartStyle: {
  250. padding: 10,
  251. animationEnabled: true,
  252. font: {
  253. name: 'Tahoma',
  254. color: 0x444444,
  255. size: 11
  256. },
  257. dataTip: {
  258. padding: 5,
  259. border: {
  260. color: 0x99bbe8,
  261. size:1
  262. },
  263. background: {
  264. color: 0xDAE7F6,
  265. alpha: .9
  266. },
  267. font: {
  268. name: 'Tahoma',
  269. color: 0x15428B,
  270. size: 10,
  271. bold: true
  272. }
  273. },
  274. xAxis: {
  275. color: 0x69aBc8,
  276. majorTicks: {color: 0x69aBc8, length: 4},
  277. minorTicks: {color: 0x69aBc8, length: 2},
  278. majorGridLines: {size: 1, color: 0xeeeeee}
  279. },
  280. yAxis: {
  281. color: 0x69aBc8,
  282. majorTicks: {color: 0x69aBc8, length: 4},
  283. minorTicks: {color: 0x69aBc8, length: 2},
  284. majorGridLines: {size: 1, color: 0xdfe8f6}
  285. }
  286. },
  287. series: [{
  288. type: 'column',
  289. displayName: 'Salary',
  290. yField: 'salary',
  291. style: {
  292. image:'ext-3.0.0/examples/chart/bar.gif',
  293. mode: 'stretch',
  294. color:0x99BBE8
  295. }
  296. }]
  297. }
  298. });
  299.  
  300.  
  301. var layout = new Ext.Panel({
  302. title: 'Employee Salary by Month',
  303. layout: 'border',
  304. layoutConfig: {
  305. columns: 1
  306. },
  307. width:600,
  308. height: 600,
  309. items: [ grid]
  310. });
  311. layout.render(Ext.getBody());
  312.  
  313. grid.getSelectionModel().on('selectionchange', function(sm){
  314. grid.removeBtn.setDisabled(sm.getCount() < 1);
  315. });
  316. });
  317.  
  318.  
  319. </script>
  320.  
  321. <div id="grid-example"></div>
  322. </body>
  323. </html>

Report this snippet  

You need to login to post a comment.