Dynamic Grid---Ext

I needed a Grid which create his ColumnModel by itself based on the XML-Data. Unfortunately it's a bit slow if you want to display a lot of data, but that's the "fault"of extjs and will hopefully be fixed in future releases I couldn't get "this.dataSource.removeListener("load", this.doReconfiguration);"statement working, which results in a performance slow down when you switch between pages. There is another "DynamicJsonReader/DynamicColumnModel ", check it out. Example usage: download the attached file and put ext-all-debug.js or ext-all.js into the folder, upload it to your webhost or put it into your local webserver directory. Go to "http://...whatever.../.../dynamic-grid.html". Attachment: DynamicGrid.zip (Update 16/04/2007) XML:

<?xml version="1.0" encoding="UTF-8"?>



<data>



  <totalRecords>176343</totalRecords>



  <recordDefinition>



    <firstname header="Firstname" tooltip="Your firstname!" />



    <surname header="Surname" tooltip="Your surname!" />



  </recordDefinition>



  <row>



    <id>1</id>



    <firstname>Max</firstname>



    <surname>Mustermann</surname>



  </row>



  <row>



    <id>2</id>



    <firstname>Max 2</firstname>



    <surname>Mustermann 2</surname>



  </row>



</data>

var ds = new Ext.data.Store({



	proxy: new Ext.data.HttpProxy({url: 'test.xml'}),







	reader: new Ext.data.DynamicXmlReader({



		   record: 'row',



		   id: 'id',



		   totalRecords: 'totalRecords',



		   recordDefinition: 'recordDefinition'



	}),







	remoteSort: true



});







grid


 = new Ext.grid.DynamicGrid('grid-example', { ds: ds });



grid


.render();



var paging = new Ext.PagingToolbar(grid


.getView().getFooterPanel(true), ds, {



	pageSize: 25,



	displayInfo: true,



});







ds.load();

Code:

Ext.grid.DynamicColumnModel = function(store) {



    var cols = [];



    var recordType = store.reader.recordType;



    var fields = recordType.prototype.fields;



   



    for (var i = 0; i < fields.keys.length; i++) {



        var fieldName = fields.keys[i];



        var field = recordType.getField(fieldName);



        cols[i] = {



            header: field.header,



            dataIndex: field.name,



            tooltip: field.tooltip,



            hidden: field.hidden



        };



    }



    Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);



};



Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});







Ext.data.DynamicXmlReader = function(config) {



    Ext.data.DynamicXmlReader.superclass.constructor.call(this, config, []);



};



Ext.extend(Ext.data.DynamicXmlReader, Ext.data.XmlReader, {



    getRecordType : function(data) {



        recordDefinition = Ext.DomQuery.select(this.meta.recordDefinition + ' > *', data);







        var arr = [];



        for (var i = 0; i < recordDefinition.length; i++) {



            arr[i] = {



                name:    recordDefinition[i].tagName,



                header:  recordDefinition[i].getAttribute('header'),



                tooltip: recordDefinition[i].getAttribute('tooltip'),



                hidden:  recordDefinition[i].getAttribute('hidden') == "true" ? true : false



            };



        }







        this.recordType = Ext.data.Record.create(arr);



        return this.recordType;



    },



       



    readRecords : function(doc) {



        this.xmlData = doc;



        var root = doc.documentElement || doc;



    	this.getRecordType(root);



        return Ext.data.DynamicXmlReader.superclass.readRecords.call(this, doc);



    }



});







Ext.grid.GridView.prototype.bindColumnModel = function(cm) {



    if(this.cm){



        this.cm.un("widthchange", this.updateColumns, this);



        this.cm.un("headerchange", this.updateHeaders, this);



        this.cm.un("hiddenchange", this.handleHiddenChange, this);



        this.cm.un("columnmoved", this.handleColumnMove, this);



        this.cm.un("columnlockchange", this.handleLockChange, this);



    }



    if(cm){



        this.generateRules(cm);



        cm.on("widthchange", this.updateColumns, this);



        cm.on("headerchange", this.updateHeaders, this);



        cm.on("hiddenchange", this.handleHiddenChange, this);



        cm.on("columnmoved", this.handleColumnMove, this);



        cm.on("columnlockchange", this.handleLockChange, this);



    }



    this.cm = cm;



};







Ext.grid.DynamicGrid = function(container, config) {



    Ext.grid.DynamicGrid.superclass.constructor.call(this, container, config);



};



Ext.extend(Ext.grid.DynamicGrid, Ext.grid.Grid, {



    render : function() {



		console.log('render');



        this.dataSource.addListener('load', this.doReconfiguration, this);



        this.colModel = new Ext.grid.DefaultColumnModel([{ header: '', dataIndex: '' }]);



        Ext.grid.DynamicGrid.superclass.render.call(this);



    },







    doReconfiguration : function() {



		console.log('doReconfiguration');



        this.colModel = new Ext.grid.DynamicColumnModel(this.dataSource);



        this.view.bindColumnModel(this.colModel);



        this.view.refresh(true);



        //this.dataSource.removeListener("load", this.doReconfiguration);



    }











});

From : http://www.extjs.com/forum/showthread.php?t=4548&highlight=dynamic+grid
_Update is available (Attachment 89 ).

IE problem fixed (one comma to much)

implement support for custom renderer