EXTJS enhanced AutoGrid : CRUD enabled

The Autogrid ext js extension, delivered via the ext js forums, is a quick grid extension that does not come with inline editing features but is ready for the job. The purpose of this autogrid is to enable quick building of datagrid via server side loading of meta information for columns. The autosave feature allows the user to keep the grid's configueration over various sessions. 

I have worked a few hours to deliver this refoactoring of the autogrid that is an extension of the EditorGridPanel, and it brinbgs new features :

  • save order and direction of query sort
  • allow inline editing including specific field for dates (can easily be extended)
  • sends new data to server in the form of field name / field value, allowing quick writing of generic save queries.

[download id="2"]

How to use :

- create your grid
- declare your dataclass (domaines)

- declare  baseUrl + saveMetaUrl + modifyUrl 

example : 



	var dataClass= "domaines";
	var controllerAction = "gridData/";
	var actionParms = "/format/json/dataClass/";

		WXC.CMSstore1=new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: baseUrl +  controllerAction + 'list' + actionParms + dataClass
					   remoteSort: true,
                 reader: new Ext.data.JsonReader(
                        {root: 'rows', id: 'id'},


             WXC.CMSGrid1 = new Ext.ux.AutoGridPanel({
  				id : "CMSGrid1",
                loadMask: true,
		deferredRender :false,
                autoSave: true,
                saveMetaUrl: baseUrl +  controllerAction + 'saveformat' + actionParms + dataClass,
                modifyUrl : baseUrl +  controllerAction + 'savedata'+ actionParms + dataClass,
                store : WXC.CMSstore1 ,

	 bbar: new Ext.PagingToolbar({
            pageSize: nbRowsPrPage,
            store:  WXC.CMSstore1,
            displayInfo: true,
            displayMsg: '{0} - {1} / {2}',
            emptyMsg: "No topics to display",


  //WXC.CMSstore1.load(	{params: {   start:0, limit:nbRowsPrPage}}	);	    

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *