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

Report this snippet  

You need to login to post a comment.