Comments on NextLogic Singapore Blog: Dynamic Columns In Ext JS Grid

It is Great! I like metadata:) But note that corr...

2011-07-27T01:16:35.331-07:00

It is Great! I like metadata:)

But note that correct attribute is "metaData", not "metadata", it is very important, because of JavaScript is case-sensitive.

Thank you for post!

2011-07-27T00:55:31.262-07:00

This comment has been removed by the author.

Why don't you just perform the logic on the se...

2011-04-20T05:55:37.233-07:00

Why don't you just perform the logic on the server and pass the columns required to the client in the json?

Hi Peter Bohm I was looking for this solution for...

2011-02-27T00:23:27.137-08:00

Hi Peter Bohm
I was looking for this solution for days but i couldn't resolve by problem even by your post.

Can i ask you to send me the full coding of Dynamic Columns In Ext JS Grid?

Simo thanks for that last comment, works as well! ...

2011-01-12T06:30:08.074-08:00

Simo thanks for that last comment, works as well! ;)

Have you also considered explicitely firing a rend...

2010-11-12T08:26:56.646-08:00

Have you also considered explicitely firing a render event to avoid overriding the native library?

grid.fireEvent("render", grid);

my json output format from the server { metaData:{...

2010-04-18T23:51:29.023-07:00

my json output format from the server
{ metaData:{ "totalProperty":"total", "root":"root", "id":"id", "fields":[ { "name":"statusid", "type":"int" } { "name":"statusname", "type":"string" } { "name":"statusdesc", "type":"string" } ] }, "success":"true", "totals":3, "records":[ {"statusid":"1","statusname":"New","statusdesc":"new description"},{"statusid":"2","statusname":"Open","statusdesc":"Open description"},{"statusid":"3","statusname":"Closed","statusdesc":"Closed description"}],columns:[ { "header":"STATUSID", "dataIndex":"statusid" } , { "header":"STATUSNAME", "dataIndex":"statusname" } , { "header":"STATUSDESC", "dataIndex":"statusdesc" } ] }
can u send me the full coding of yours!!!!!

H...I have a problem in displaying the dynamic col...

2010-04-18T23:51:09.401-07:00

H...I have a problem in displaying the dynamic column header grid wit their values.. I dont knw where i did the mistake...
Ext.onReady(function(){
var proxy= new Ext.data.HttpProxy(
{url: 'sample1.jsp'}
);
var reader=new Ext.data.JsonReader(
{root:'root'
});
var store= new Ext.data.Store({
proxy:proxy,
reader: reader,
remoteSort: true
});
store.load();
Ext.data.DynamicJsonReader = function(config){
Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};
Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
readRecords : function(o){
alert("hi");
this.jsonData = o;
if(o.metaData){
delete this.ef;
this.meta = o.metaData;
this.recordType = Ext.data.Record.create(o.metaData.fields);
this.onMetaChange(this.meta, this.recordType, o);
} else {
var data = this.meta.root ? this.getJsonAccessor(this.meta.root)(o) : o;
if (Ext.isArray(data) && data[0]) {
delete this.ef;
var fields = [];
for (var fieldName in data[0]) {
fields.push(fieldName);
}
this.meta.fields = fields;
this.recordType = Ext.data.Record.create(fields);
this.onMetaChange(this.meta, this.recordType, o);
}
}
var s = this.meta, Record = this.recordType,
f = Record.prototype.fields, fi = f.items, fl = f.length;
if (!this.ef) {
if(s.totalProperty) {
this.getTotal = this.getJsonAccessor(s.totalProperty);
}
if(s.successProperty) {
this.getSuccess = this.getJsonAccessor(s.successProperty);
}
this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
if (s.id) {
var g = this.getJsonAccessor(s.id);
this.getId = function(rec) {
var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
} else {
this.getId = function(){return null;};
}
this.ef = [];
for(var i = 0; i < fl; i++){
f = fi[i];
var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
this.ef[i] = this.getJsonAccessor(map);
}
}
var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
if(s.totalProperty){
var v = parseInt(this.getTotal(o), 10);
if(!isNaN(v)){
totalRecords = v;
}
}
if(s.successProperty){
var v = this.getSuccess(o);
if(v === false || v === 'false'){
success = false;
}
}
var records = [];
for(var i = 0; i < c; i++){
var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fl; j++){
f = fi[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, n);
}
var record = new Record(values, id);
record.json = n;
records[i] = record;
}
return {
success : success,
records : records,
totalRecords : totalRecords
};
}
});
Ext.grid.DynamicColumnModel = function(store, config){
Ext.grid.DynamicColumnModel.superclass.constructor.call(this, Ext.apply({store: store, columns: []}, config));
if (store.fields) {

this.reconfigure();
}
store.on('load', this.reconfigure, this);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {
reconfigure: function(){
var cols = [];
this.store.fields.each(function(field){
cols.push({header: field.name, dataIndex: field.name});
});
this.setConfig(cols);
}
});
var grid=new Ext.grid.GridPanel({
width: 1000,
height: 200,
cm: new Ext.grid.DynamicColumnModel(store),
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: store,
viewConfig :{
forceFit:true
}
});
grid.render(document.body);
});

Hi, what exactly is a problem about it? Can you sh...

2009-12-19T16:48:29.769-08:00

Hi,
what exactly is a problem about it? Can you show the controller code handling the saving?

thanks

Hello, How did you solve the problem, that when yo...

2009-12-16T08:48:56.727-08:00

Hello,
How did you solve the problem, that when you change a checkbox to false, then the server gets a false instead of an empty string?

Thanks!

does it work in ExtJs 3.0 Nice work :)

2009-11-01T13:33:48.859-08:00

does it work in ExtJs 3.0
Nice work :)

Hi Peter, thanks a lot. I was looking for this sol...

2009-10-30T03:02:44.066-07:00

Hi Peter,
thanks a lot. I was looking for this solution for days together and my quest ended here. :) Thanks a lot and keep up the great work...