• AJAX based combo box editor field for n to 1 data relationship reading from AJAX meta columns via data type :

  {"name":"Categories_title","header"
  :"Categories_title","related":"Category","dataType":"leftJoin","width":250}

• GridSearch plugin integration

Download : EditorAutoGrid (713) – the zip  includes

• AutoGrid.js : editor auto grid code (exstends EditorGridPanel)
• taskGrid.js / CatGrid.js : javascript code for the 2 database tables in the  example above (TASKS + CATEGORY).
• tasks-json.txt :JSON data for main table (TASK)
• tasks-category-combo-json : JSON data sample for related table data in combobox

Please note that this download does not include server code. among known bugs I can remember the nasty “load twice when doing a search”, or the extjs 3.0 rc1.1 “getCellEditor is not a function” error when trying to edit.

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.

How to use :

- create your grid
- declare your dataclass (domaines)

- declare  baseUrl + saveMetaUrl + modifyUrl 

example : 

Ext.onReady(function(){

	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'},
                        ['id']
                    )

					 });

             WXC.CMSGrid1 = new Ext.ux.AutoGridPanel({
                title:'Domaines',
  				id : "CMSGrid1",
               	 width:'100%',
		        height:600,
                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}}	);	    

        });

Combining best of both worlds : One of the most popular opensource CRM (Customer Relationship Management) software is now using extjs javscript library a lot for user interface quickies.

Developers will love documentation around various implementation of this AJAX library : Since Sugar 5.1, the search is layout out via type-ahead combo box system called QuickSearch based around ExtJS. In version 5.2, a lot of tools  feature powerful interaction javascripts, such as the email reader / composer (imazge above), or the application studio, located in  The Developer tools sub-panel that displays options to build new modules and customize existing ones. The Module Builder enables you to build custom modules and Studio enables you to customize existing modules. Creating  relationships between modules is also an option while removing default modules is as easy as performing drag and drop operations within the admin.

While EXTJS 3.0 is on the way with a roadmap setting deadlines for early 2009, Jquery continues its path on the way to serious lightweight alternative to the massive EXT : JX extension for Jquery includes the viewport paradigm on which relies every EXT JS application.

Web based interfaces

In spite of huge progress and impressive use of ease, Jquery is not there yet : for the development of applications many developers have chosen the exhaustivity of EXT JS. Have a look at google code hosted project in development : ecartcommerce, CMS jimw, both ext js and zend framework based. In the world of content management systems, mysource is making the news with a new video that demonstrates inline editing, and other exciting Rich Application features.

For those interested in developping the best possible web based application, Tine2.0, formerly eGroupWare2.0, a combination of CRM and ERP,  is worth having a look at. Its multiple feature interface is one of the most intuitive multi panel screen you can imagine, built entirely out of javascript and HTML. Based on Extjs and Zend Framework, it demonstrates that those 2 popular technologies can -finally- work together to build sensible opensource applications with features of most sophisticated desktops : accordion menu that browses between various parts of the application, tere based menu for hierachical structures, dynamic grid for data scrolling, simultaneous record viewing below the data grid. The fact that the source code of Tine2.0 can be downloaded separately from packages you might already have installed ten times on your server will save you the hassle of finding interesting code lines. But i’s not only design we’re after here : PDF export at right click on  TIne2.0 contact management. More technical details would only bring enthusiasts on the project, especially after a quick look at developpers’WIKI where specific  conceptual choices are explained : MVC or not MVC, that is the question. Anyhow, when Rich Internet Applications is what you’re looking for, try out Tine20 !!

A lot of nice names for this commercial J2EE based content management system that demonstrates extensive use of best dynamic HTML practice, with the help of the very special extJS library. The problem with that demonstration is that it will take you a while before you can test it on your development servers as you will have to go through commercial business AND serious java expertise in collaboration with Innovation Gate, the german company that develops this system. But it’s worth the try : this CMS goes further than basic content and workflow management : cross browser is not enough, WGA is also “cross client” : Browser (IE and Mozilla), Lotus Notes, MSWord, HTML- and XML-Editors or Email are acceptable platform to work with the system that allows publishing content to any media : Web, Cell phone, PDA, pdf. Finally, WGA allows to integrate any data source and to deal with it as “virtual repositories”. Invoices from SAP, business cases from CRM, data sheets from relational databases – all “business objects” are treated as content, just as if they were Web content maintained by authors.

• Click here for demo (user : demo / password : demo)
• Source:  ExtJs forum