PDA

View Full Version : Help !!! - Data not displaying in EditableGrid



Kesavan.Lakshmanan
3 Mar 2010, 7:57 AM
Dear All,

I am newbie trying to understand the editable grid, my concern is populating the Grid with the data from an array.

Point 1 - I am populating the grid using the data from an array variable "myData", the data appears without any problems if i try something like below
{name:'Santna Monica',email:'[email protected]',country:'Brazil'}
Point 2 - In some scenarios i might get only the data(see below line) as used in my code.
['Santna Monica','[email protected]','Brazil'],

Question 1- in such a situtation is there a way to put only the data without the column mapping, so the grid renders without any problems?
OR
Question 2 - say if the columns names comes in a javascript variable, is there a way i can use the javascript variable something like below
[eval(variable1):'Santna Monica',eval(variable2):'[email protected]',eval(variable3):'Brazil'],

please find the Code below for your reference.

Thanks in advance for your help.

CODE
--------------------
Ext.onReady(function(){
Ext.QuickTips.init();
var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'country',
type: 'string'
}]);

var DataSource = document.getElementById(DataSourceID).childNodes[0];

var myData = [
['Santna Monica','[email protected]','Brazil'],
['Emma Alexander','[email protected]','United States'],
['William Marcel','[email protected]','United Kingdom'],
['Dumini Alex','[email protected]','South Africa']
];

var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: Employee}),
data: myData,
sortInfo: {field: 'name', direction: 'ASC'}
});

var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
id: 'name',
header: 'Name',
dataIndex: 'name',
width: 130,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Email',
dataIndex: 'email',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Country',
dataIndex: 'country',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false
})
},
checkColumn // the plugin instance
]
});

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
//autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
// specify the check column plugin on the grid so the plugin is initialized
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
// access the Record constructor through the grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
});

carol.ext
3 Mar 2010, 10:21 AM
Hard to read all that, I didn't. Please use code tags in the future (on the toolbar in editor use "#").

Also, it is redundant and annoying to put Help!!! in the title/subject of your post. This IS the Help forum, everyone wants help, right?

Take a look at the code example in the ArrayReader API (http://www.extjs.com/deploy/dev/docs/?class=Ext.data.ArrayReader). It shows the data format that it will read. Compare that to your data and that consumed by JsonReader.

Kesavan.Lakshmanan
3 Mar 2010, 9:29 PM
@Carol - You help is very much appreciated :).

Indeed your suggestion worked like a charm, thanks again. I have attached my working code again for others.

Cheers.



Ext.onReady(function(){
Ext.QuickTips.init();
var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string',
mapping: 1
}, {
name: 'email',
type: 'string',
mapping: 2
}, {
name: 'country',
type: 'string',
mapping: 3
}]);

var DataSource = document.getElementById(DataSourceID).childNodes[0];

var myData = [
[1,'Santana Monica','[email protected]','Brazil'],
[2,'Emma Alexander','[email protected]','United States'],
[3,'William Marcel','[email protected]','United Kingdom'],
[4,'Dumini Alex','[email protected]','South Africa']
];

var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: Employee}),
data: myData,
sortInfo: {field: 'name', direction: 'ASC'}
});

var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
id: 'name',
header: 'Name',
dataIndex: 'name',
width: 130,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Email',
dataIndex: 'email',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Country',
dataIndex: 'country',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false
})
},
checkColumn // the plugin instance
]
});

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
//autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
// specify the check column plugin on the grid so the plugin is initialized
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
// access the Record constructor through the grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
});