X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/grid/row-editor.js diff --git a/examples/grid/row-editor.js b/examples/grid/row-editor.js new file mode 100644 index 00000000..df9dc43a --- /dev/null +++ b/examples/grid/row-editor.js @@ -0,0 +1,295 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +Ext.onReady(function(){ + Ext.QuickTips.init(); + + var Employee = Ext.data.Record.create([{ + name: 'name', + type: 'string' + }, { + name: 'email', + type: 'string' + }, { + name: 'start', + type: 'date', + dateFormat: 'n/j/Y' + },{ + name: 'salary', + type: 'float' + },{ + name: 'active', + type: 'bool' + }]); + + + // hideous function to generate employee data + var genData = function(){ + var data = []; + var s = new Date(2007, 0, 1); + var now = new Date(), i = -1; + while(s.getTime() < now.getTime()){ + var ecount = Ext.ux.getRandomInt(0, 3); + for(var i = 0; i < ecount; i++){ + var name = Ext.ux.generateName(); + data.push({ + start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)), + name : name, + email: name.toLowerCase().replace(' ', '.') + '@exttest.com', + active: true, + salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000 + }); + } + s = s.add(Date.MONTH, 1); + } + return data; + } + + + var store = new Ext.data.GroupingStore({ + reader: new Ext.data.JsonReader({fields: Employee}), + data: genData(), + sortInfo: {field: 'start', direction: 'ASC'} + }); + + var editor = new Ext.ux.grid.RowEditor({ + saveText: 'Update' + }); + + var grid = new Ext.grid.GridPanel({ + store: store, + width: 600, + region:'center', + margins: '0 5 5 5', + autoExpandColumn: 'name', + plugins: [editor], + view: new Ext.grid.GroupingView({ + markDirty: false + }), + tbar: [{ + iconCls: 'icon-user-add', + text: 'Add Employee', + handler: function(){ + var e = new Employee({ + name: 'New Guy', + email: 'new@exttest.com', + start: (new Date()).clearTime(), + salary: 50000, + active: true + }); + editor.stopEditing(); + store.insert(0, e); + grid.getView().refresh(); + grid.getSelectionModel().selectRow(0); + editor.startEditing(0); + } + },{ + ref: '../removeBtn', + iconCls: 'icon-user-delete', + text: 'Remove Employee', + disabled: true, + handler: function(){ + editor.stopEditing(); + var s = grid.getSelectionModel().getSelections(); + for(var i = 0, r; r = s[i]; i++){ + store.remove(r); + } + } + }], + + columns: [ + new Ext.grid.RowNumberer(), + { + id: 'name', + header: 'First Name', + dataIndex: 'name', + width: 220, + sortable: true, + editor: { + xtype: 'textfield', + allowBlank: false + } + },{ + header: 'Email', + dataIndex: 'email', + width: 150, + sortable: true, + editor: { + xtype: 'textfield', + allowBlank: false, + vtype: 'email' + } + },{ + xtype: 'datecolumn', + header: 'Start Date', + dataIndex: 'start', + format: 'm/d/Y', + width: 100, + sortable: true, + groupRenderer: Ext.util.Format.dateRenderer('M y'), + editor: { + xtype: 'datefield', + allowBlank: false, + minValue: '01/01/2006', + minText: 'Can\'t have a start date before the company existed!', + maxValue: (new Date()).format('m/d/Y') + } + },{ + xtype: 'numbercolumn', + header: 'Salary', + dataIndex: 'salary', + format: '$0,0.00', + width: 100, + sortable: true, + editor: { + xtype: 'numberfield', + allowBlank: false, + minValue: 1, + maxValue: 150000 + } + },{ + xtype: 'booleancolumn', + header: 'Active', + dataIndex: 'active', + align: 'center', + width: 50, + trueText: 'Yes', + falseText: 'No', + editor: { + xtype: 'checkbox' + } + }] + }); + + var cstore = new Ext.data.JsonStore({ + fields:['month', 'employees', 'salary'], + data:[], + refreshData: function(){ + var o = {}, data = []; + var s = new Date(2007, 0, 1); + var now = new Date(), i = -1; + while(s.getTime() < now.getTime()){ + var m = { + month: s.format('M y'), + employees: 0, + salary: 0, + index: ++i + } + data.push(m); + o[m.month] = m; + s = s.add(Date.MONTH, 1); + } + store.each(function(r){ + var m = o[r.data.start.format('M y')]; + for(var i = m.index, mo; mo = data[i]; i++){ + mo.employees += 10000; + mo.salary += r.data.salary; + } + }); + this.loadData(data); + } + }); + cstore.refreshData(); + store.on('add', cstore.refreshData, cstore); + store.on('remove', cstore.refreshData, cstore); + store.on('update', cstore.refreshData, cstore); + + var chart = new Ext.Panel({ + width:600, + height:200, + layout:'fit', + margins: '5 5 0', + region: 'north', + split: true, + minHeight: 100, + maxHeight: 500, + + items: { + xtype: 'columnchart', + store: cstore, + url:'../../resources/charts.swf', + xField: 'month', + yAxis: new Ext.chart.NumericAxis({ + displayName: 'Employees', + labelRenderer : Ext.util.Format.numberRenderer('0,0') + }), + tipRenderer : function(chart, record, index, series){ + if(series.yField == 'salary'){ + return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month; + }else{ + return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month; + } + }, + + // style chart so it looks pretty + chartStyle: { + padding: 10, + animationEnabled: true, + font: { + name: 'Tahoma', + color: 0x444444, + size: 11 + }, + dataTip: { + padding: 5, + border: { + color: 0x99bbe8, + size:1 + }, + background: { + color: 0xDAE7F6, + alpha: .9 + }, + font: { + name: 'Tahoma', + color: 0x15428B, + size: 10, + bold: true + } + }, + xAxis: { + color: 0x69aBc8, + majorTicks: {color: 0x69aBc8, length: 4}, + minorTicks: {color: 0x69aBc8, length: 2}, + majorGridLines: {size: 1, color: 0xeeeeee} + }, + yAxis: { + color: 0x69aBc8, + majorTicks: {color: 0x69aBc8, length: 4}, + minorTicks: {color: 0x69aBc8, length: 2}, + majorGridLines: {size: 1, color: 0xdfe8f6} + } + }, + series: [{ + type: 'column', + displayName: 'Salary', + yField: 'salary', + style: { + image:'../chart/bar.gif', + mode: 'stretch', + color:0x99BBE8 + } + }] + } + }); + + + var layout = new Ext.Panel({ + title: 'Employee Salary by Month', + layout: 'border', + layoutConfig: { + columns: 1 + }, + width:600, + height: 600, + items: [chart, grid] + }); + layout.render(Ext.getBody()); + + grid.getSelectionModel().on('selectionchange', function(sm){ + grid.removeBtn.setDisabled(sm.getCount() < 1); + }); +});