X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/row-editor.html
diff --git a/docs/source/row-editor.html b/docs/source/row-editor.html
new file mode 100644
index 00000000..7e408014
--- /dev/null
+++ b/docs/source/row-editor.html
@@ -0,0 +1,299 @@
+
+
+ The source code
+
+
+
+
+ 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);
+ });
+});
+
+
+
\ No newline at end of file