Thank you very much for your help.
[FONT='Verdana','sans-serif']I like the dynamic grid function. It basically works. But, if I am rendering it into a window container, there is an issue with scope chain. Basically, if I deem the store which generates the grid in the scope that above the window (like if I use a button to put window renderer on button click event), it works - because the grid was already fulfilled and just waiting to be rendered into a container. But, if I put window in the higher scope chain it would not. [/FONT]
[FONT='Verdana','sans-serif']I understand why this is happening (although I may have failed to articulate it clearly). I am just wondering if anyone has a suggestion on how to have the grid refer to store's property instead of having it encapsulated within the store event. I could not figure it out.[/FONT]
Hello spextjs,
Did you manage to develop a DynamicXMLReader too ? Would be very useful for my problem.
Atleast, any pointers/suggestions you would offer, if i were building one ?
Thanks for this, but I'm getting an annoying error when I am using:
..as the column model attribute for my grid. However, Firebug is telling me off its showing the following script error:Code:new Ext.grid.DynamicColumnModel(ds)'
Ext.grid.DynamicColumnModel is not a constructorI've followed your code almost to the letter (swapping out variable names obviously), but to no avail. The Constructor to my grid looks like this: (# beign a place holder for my actual names which are company based hence I wish not show them).
Code:var #name = new Ext.grid.EditorGridPanel ( { id:'#id', store:#ds, plain: true, colModel:new Ext.grid.DynamicColumnModel(#ds), //firebug error here autoScroll:true, stripeRows :true, autoExpandColumn:'#colname', width: '70%' } );
]I'm probably missing something plainly obvious here, but any suggestions?
![]()
If it can't be found, then don't look !
The problem is that Ext.grid.DynamicColumnModel(obj) no longer exists in Ext 3.x, so you'll never be able to use that function. Currently I have no idea how to get grid columns loaded on the fly. My page is used for running queries to a Solr db, and displays the results in a grid. Current, it works for a set of data that I know to be there, and therefore is correct for only that query term. However, if I query other things, it obviously doesn't show up.
I'm not sure how to go about getting this done, as a lot of the forum suggestions are outdated (like this). The most I've thought of is to pass the column data with the JSON returned from query, but even then I don't know how to load that up to the column fields. I'm still tinkering with it, and eventually I'll find something, I'm sure...
ExtJs forum volunteer. No official connection to the Ext Company. I do not speak for them.
ExtJs consultancy offered. £ 50/hour. Evenings+weekends. animal.software@btinternet.com
Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
See Saki's samples: http://examples.extjs.eu/
Build your own Ext: http://extjs.com/products/extjs/build/
Scope: http://extjs.com/forum/showthread.ph...642#post257642
??????? ???? ??? 3
http://www.flyarb3.com
I need small help in the below mentioned code.
for (var i = 0; i < fields.keys.length; i++)
{
var fieldName = fields.keys[i];
var field = recordType.getField(fieldName);
cols[i] = {header: field.name, dataIndex: field.name, width:300};
}
I need Sorting on the column so i have added sortable:true, but the sorting is not working.
Can u please help me out for Sorting in DynamicColumnModel
To get DynamicJsonReader working I had to add two more lines to getRecordType (to call buildExtractors). Now the current version looks like that:
PHP Code:
Ext.ns('Ext.data.DynamicJsonReader');
Ext.data.DynamicJsonReader = function(config)
{
Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};
Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
/**
* Create Record automatically based on json data
* Private, called by readRecords()
* @param {Object} data Json data
*/
getRecordType: function(data) {
var i = 0, arr = [];
for (var name in data[0]) { arr[i++] = name; } // is there a built-in to do this?
this.recordType = Ext.data.Record.create(arr);
this.ef = false;
this.buildExtractors();
return this.recordType;
},
/**
* Create a data block containing Ext.data.Records from a JSON object.
* @param {Object} o An object which contains an Array of row objects in the property specified
* in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
* which contains the total size of the dataset.
* @return {Object} data A data block which is used by an Ext.data.Store object as
* a cache of Ext.data.Records.
*/
readRecords : function(o){
/**
* After any data loads, the raw JSON data is available for further custom processing. If no data is
* loaded or there is a load exception this property will be undefined.
* @type Object
*/
this.jsonData = o;
if(o.metaData){
this.onMetaChange(o.metaData);
}
//start modifications
var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
var s = this.meta, Record = this.getRecordType(root),
f = Record.prototype.fields, fi = f.items, fl = f.length, v;
//end modifications
if(s.totalProperty){
v = parseInt(this.getTotal(o), 10);
if(!isNaN(v)){
totalRecords = v;
}
}
if(s.successProperty){
v = this.getSuccess(o);
if(v === false || v === 'false'){
success = false;
}
}
// TODO return Ext.data.Response instance instead. @see #readResponse
return {
success : success,
records : this.extractData(root, true), // <-- true to return [Ext.data.Record]
totalRecords : totalRecords
};
}
});
Another way to achieve dynamic column grids is using metaData.
in your js:
Then in your data fetching script return json in this format (called /cgi-bin/get_dynamic_grid_data.pl in this example):Code:var ds = new Ext.data.Store({ url: '/cgi-bin/get_dynamic_grid_data.pl', // your script that fetches the data reader: new Ext.data.JsonReader({ root: 'rows', successProperty: 'success' }) }); var grid = new Ext.grid.GridPanel({ ds: ds, cm: new Ext.grid.ColumnModel([]) }); grid.render(Ext.getBody()) ds.on('metachange', function (store,meta) { var columns = []; for (var i = 0; i < meta.fields.length; i++ ) { var hidden = meta.fields[i].hidden; columns.push( { header: meta.fields[i].header, dataIndex: meta.fields[i].name, type: meta.fields[i].type, id: meta.fields[i].id, sortable: meta.fields[i].sortable } ); } grid.reconfigure(store, new Ext.grid.ColumnModel(columns)); })
The advantage of doing it this way is less code (no extensions required) and you can change the column model on one rendered grid as many times as you want. It also resolved the problem of being able to provide column widths, data types, sortable etc.Code:{ metaData: { fields: [ {header: 'Name', name: 'name', sortable: true}, {header: 'URL', name: 'url'}, {header: 'Size', name: 'size'}, {header: 'Last Modified', name: 'lastmod'} ], root: 'rows' }, rows: [ {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)}, {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)} ], success: true }