PDA

View Full Version : RowEditor grid using hard code data



webarnie
22 Feb 2011, 7:37 AM
I am working on a page that I would like to use a row editor grid like the examples that come with Extjs (row-editor.js, row-editor.html). since I am not familiar with the RowEditor grid, so I usually start of with the samples and modify it to get what I need. The sample uses a function to generate data to display, which I need to change. I have replace the data with hard coded JSON data that I know is valid, however, the data does not load and there are no messages. What do I need to do to get the data to load? I am also a bit confused as to why a GroupingStore is being used. Why is GroupingStore being used and what field is being grouped on? Typically when I have used a GroupingStore, I specifiy a groupField, which I do not see in this code.



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.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(),
data: {"success": "true", "msg": "", "total": "10", "rows":
[
{"active": true,"email": "[email protected]","name": "Sara Train","salary": 70000,"start": "Tue Jan 02 2007 00:00:00 GMT-0500 (Eastern Standard Time)"},
{"active": true,"email": "[email protected]","name": "Jack Little","salary": 74000,"start": "Sun Jan 21 2007 00:00:00 GMT-0500 (Eastern Standard Time)"},
{"active": true,"email": "[email protected]","name": "Jack Lewis","salary": 49000,"start": "Sun Jan 14 2007 00:00:00 GMT-0500 (Eastern Standard Time)"},
{"active": true,"email": "[email protected]","name": "Julie Williams","salary": 54000,"start": "Mon Feb 26 2007 00:00:00 GMT-0500 (Eastern Standard Time)"},
{"active": true,"email": "[email protected]","name": "Bill Little","salary": 51000,"start": "Sun Feb 25 2007 00:00:00 GMT-0500 (Eastern Standard Time)"},
{"active": true,"email": "[email protected]","name": "Ted Train","salary": 49000,"start": "Fri Mar 23 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"},
{"active": true,"email": "[email protected]","name": "Bill Lee","salary": 55000,"start": "Sat Apr 28 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"},
{"active": true,"email": "[email protected]","name": "John Little","salary": 44000,"start": "Sun Apr 01 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"},
{"active": true,"email": "[email protected]","name": "Mark Wilson","salary": 46000,"start": "Thu May 10 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"},
{"active": true,"email": "[email protected]","name": "Sara Hot","salary": 74000,"start": "Thu Jun 07 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"},
{"active": true,"email": "[email protected]","name": "Travis Mutt","salary": 47000,"start": "Sun Jun 03 2007 00:00:00 GMT-0400 (Eastern Daylight Time)"}
]
},
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: '[email protected]',
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 layout = new Ext.Panel({
title: 'Employee Salary by Month',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});

Mthor
22 Feb 2011, 11:29 AM
are you sure you meant this for the designer forum, might get more help on the proper thread.

jarrednicholls
23 Feb 2011, 10:29 AM
Agreed with Mthor, moving to Ext 3 forum.

Condor
24 Feb 2011, 8:00 AM
1. Your JsonReader is missing:

root: 'rows'
2. The dataFormat of your 'start' field doesn't match the actual date format.