PDA

View Full Version : Trying to get AutoGrid to work... Please help



bbxx
14 Nov 2009, 1:58 PM
So I found this great piece of code called the AutoGrid which allows a dynamic number of columns. Problem is that I can't get it to work. My grid remains a blank white space.


Here is the code for the Grid and it's Store:


var rateValuesGridStore = new Ext.data.Store({
id: 'rateValuesGridStore',
autoLoad: true, //false,
autoSave: false,
proxy: new Ext.data.HttpProxy({
url: 'AppTasks.php', // File to connect to
method: 'POST',
api: {
read : 'AppTasks.php?api=read',
create : 'AppTasks.php?api=create',
update : 'AppTasks.php?api=update',
destroy : 'AppTasks.php?api=destroy'
}
}),
baseParams:{task: "RATE_VALUES_GRID", rateID:0}, // this parameter asks for listing
reader: new Ext.data.JsonReader({
isData : function(data) {
return (data && Ext.isObject(data) && !Ext.isEmpty(this.getId(data))) ? true : false;
}
}),
writer: new Ext.data.JsonWriter({
writeAllFields:true
}),
exception : function(proxy, type, action, options, res, arg) {
if (type === 'remote') {
Ext.Msg.show({
title: 'REMOTE EXCEPTION',
msg: res.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}

});

var rateValuesGrid = new Ext.ux.AutoGridPanel({
store: rateValuesGridStore,
clicksToEdit: 1,
stripeRows: true,
height:400,
width:600,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners:
{
'rowselect': function(sm, row, rec)
{
Ext.getCmp('rateConfigMoveDown').enable();
Ext.getCmp('rateConfigMoveUp').enable();
Ext.getCmp('rateConfigDelete').enable();
}
}
}),

});
Here is the code for the AutoGrid itself:


Ext.ux.AutoGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {

initComponent : function(){
// Create a empty colModel if none given
if(!this.colModel) {
this.colModel = new Ext.grid.ColumnModel([]);
}

Ext.ux.AutoGridPanel.superclass.initComponent.call(this);

// register to the store's metachange event
if(this.store){
this.store.on("metachange", this.onMetaChange, this);
}

},

onMetaChange : function(store, meta) {
//console.log("onMetaChange", meta.fields);

// loop for every field, only add fields with a header property (modified copy from ColumnModel constructor)
var field;
var config = [];
var autoExpand = false;
console.log("Length: " + meta.fields.length +" ");
for(var i = 0, len = meta.fields.length; i < len; i++)
{
field = meta.fields[i];
console.log("Field: " + field.name);
if(field.header !== undefined){
field.dataIndex = field.name;

console.log("Header is defined...");
// search for cell render functions by [field.renderer] or _[field.name]

if(field.renderer !== undefined)
{
if(this.cellRenderers[field.renderer]) {
echo("first render option");
field.renderer = this.cellRenderers[field.renderer];
} else if(this.cellRenderers["_"+field.name]) {
echo("second render option");
field.renderer = this.cellRenderers["_"+field.name];
}
}

console.log("Ready to add editors");
// add editors
if(field.editor !== undefined){
var editor = field.editor;
switch (editor)
{
case 'TextField' :
console.log("TextField editor assigned");
field.editor = new Ext.grid.GridEditor(new Ext.form.TextField(editor.config));
break;

case 'NumberField' :
console.log("NumberField editor assigned");
field.editor = new Ext.grid.GridEditor(new Ext.form.NumberField(editor.config));
break;

case 'DateField' :
console.log("DateField editor assigned");
field.editor = new Ext.grid.GridEditor(new Ext.form.DateField(editor.config));
break;

case 'Checkbox' :
console.log("Checkbox editor assigned");
field.editor = new Ext.grid.GridEditor(new Ext.form.Checkbox(editor.config));
break;

default :
console.log("TextField editor assigned by DEFAULT");
field.editor = new Ext.grid.GridEditor(new Ext.form.TextField(editor.config));
}
}

if(!field.id) {
field.id = 'c' + i;
console.log("New auto field ID:" + field.id);
}

// if width is auto, set autoExpand variable (should only be set after reconfigure for some reason)
if(field.width == "auto") {
autoExpand = field.id;
field.width = 100;
console.log("Setting autoExpand");
}

// add to the config (field.name is replaced by dataIndex)
delete field.name;
config[config.length] = field;
}
}
// Create the new cm, and update the gridview.
var cm = new Ext.grid.ColumnModel(config);
this.reconfigure(this.dataSource, cm);

this.autoExpandColumn = autoExpand;
}
});

Here is the JSON which is being loaded by the store:



{
"results":[
{
"transactionCode":"JUNK01",
"salesCode":"PERSON01",
"lowerLimit":"0",
"upperLimit":"50",
"rate":80
},
{
"transactionCode":"JUNK02",
"salesCode":"PERSON01",
"lowerLimit":"50",
"upperLimit":"100",
"rate":100
}
],
"metaData":{
"root":"results",
"id":"transactionCode",
"fields":[
{
"name":"transactionCode",
"type":"string"
},
{
"name":"salesCode",
"type":"string"
},
{
"name":"lowerLimit",
"type":"string",
"header":"lowerLimit",
"editor":"TextField"
},
{
"name":"upperLimit",
"type":"string",
"header":"upperLimit",
"editor":"TextField"
},
{
"name":"rate",
"type":"float",
"header":"rate",
"editor":"NumberField"
}
]
}
}






And finally, here is the firebug output:
Length: 5
Field: transactionCode
Field: salesCode
Field: lowerLimit
Header is defined...
Ready to add editors
TextField editor assigned
New auto field ID:c2
Field: upperLimit
Header is defined...
Ready to add editors
TextField editor assigned
New auto field ID:c3
Field: rate
Header is defined...
Ready to add editors
NumberField editor assigned
New auto field ID:c4

bbxx
14 Nov 2009, 2:46 PM
A minor change:



this.colModel.config = config;
if(this.rendered){
this.view.refresh(true);
}

instead of...
/*
// Create the new cm, and update the gridview.
var cm = new Ext.grid.ColumnModel(config);
this.reconfigure(this.dataSource, cm);

this.autoExpandColumn = autoExpand;
*/

Now my data shows in my grid. Just have to get the editor to work now. I get this when I click on a cell:
this.config[colIndex].getCellEditor is not a function