The Problem

Imagine that you have a one-to-many relationship in your database, for example, you have table person in which you keep personal data (first, middle, last names, etc.) and you have table phone where you keep phone numbers (phone type, phone number).

It is quite common to have person:phones, company:phones, order:items, invoice:items, etc relationships, isn’t it?

Now, it is quite easy to create a grid that displays list of persons but what about their phones? They are in the different table. Yes, we could create two stores: one for persons grid and another, hidden, for phones, load them from server and somehow filter phones depending on persons.

Nevertheless, I was looking for a simpler solution as I wanted one client server round trip and I wanted to display “many” data in QuickTip. And I found one…

Solution – Server Side

MySql, that I use as my main database backend, has function group_concat since version 4.1 and SQLite has it since version 3.5.

The idea is to join tables person and phone server side and return “many” data in one extra field as string separated by arbitrary separators. The SQL statement would be as follows:

SELECT 
    persFirstName, persMidName, persLastName,
    group_concat(concat_ws('~', phoneType, phoneNumber), '|') AS phones
FROM person
    LEFT JOIN phone ON person.persID=phone.persIDs
GROUP BY person.persID

phones part of the output of the above sql would look like

Home~123456|Work~87654|Mobile~654321

Solution – Client Side

We cannot display received phones directly in person grid (well we could but users would hate us) but we need some processing. I decided to display phones in QuickTips so I needed custom renderer for persLastName:

/**
 * Last Name rederer including tooltip with phones
 * @param {Mixed} val Value to render
 * @param {Object} cell
 * @param {Ext.data.Record} record
 */
,renderLastName:function(val, cell, record) {
 
    // get data
    var data = record.data;
 
    // convert phones to array (only once)
    data.phones = 
        Ext.isArray(data.phones) ? data.phones : this.getPhones(data.phones);
 
    // create tooltip
    var qtip = this.qtipTpl.apply(data.phones);
 
    // return markup
    return '<div qtip="' + qtip +'">' + val + '</div>';
} // eo function renderLastName

and getPhones function:

/**
 * Converts string phones to array of objects
 * @param {String} phones
 * @return {Array} Array of phone objects
 */
,getPhones:function(phones) {
 
    // empty array if nothing to do
    if(!phones) {
        return [];
    }
 
    // init return value
    var retval = [];
 
    // split string to phones
    var aps = phones.split('|');
 
    // iterate through phones to extract phoneType and phoneNumber
    Ext.each(aps, function(phone) {
        var a = phone.split('~');
        retval.push({phoneType:a[0], phoneNumber:a[1]});
    });
 
    return retval;
} // eo function getPhones

A bit of XTemplate work for QuickTips and we’re done.

Conclusion

This is not full fledged one-to-many data handling with editing, adding and deleting items at “many” side, it is just simple display of data from “many” table, anyway, it can come handy sometimes.

You can see the working example here: http://examples.extjs.eu

The “many” display target does not need to be QuickTip, it can be row expander as well.

Preface

This article it the follow up of the Writing a Big Application in Ext post and it assumes that your application is written, at least to some degree, that way. It also assumes that the server side language is PHP 5.x, other users can take the idea and write the server side logic in their languages. It is written on and for Linux environment, again, users of other systems must accommodate it to their environments.

What’s the difference anyway?

On a development system we want fast cycle of edit-file/run-application. Also, we want to have access to human readable, fully commented files into which we can step with Firebug debugger to see what is happening when code runs. If your application consists of 100 javascript files we want them all individually included in page head to be able to quickly edit/reload page/see the result.

On a production system we want fastest load possible, no debugging, and possibly to prevent unauthorized users or attackers to read our files. No comments are needed in files.

The Files

We have our source javascript files but we need a bit more. First of all we need a file list that would define which files and in which order we will include. This file list will be used by both switch logic and Makefile that will create the compressed version of sources. An example of such file list can be:

FILES=\
    Ext.ux.grid.Search.js \
    Ext.ux.IconMenu.js \
    Ext.ux.IconCombo.js \
    Ext.ux.ThemeCombo.js \
    Ext.ux.LangSelectCombo.js \
    Ext.ux.grid.RowActions.js \
    Ext.ux.grid.CellActions.js \
    Ext.ux.tree.ArrayTree.js \
    Ext.ux.FileUploader.js \
    Ext.ux.UploadPanel.js \
    Ext.ux.FileTreeMenu.js \
    Ext.ux.FileTreePanel.js

Next, we need Makefile (file with rules for make program):

include filelist
 
application-all.js: application-all-debug.js
    java -jar ~/bin/yuicompressor.jar \
        application-all-debug.js > application-all.js
 
application-all-debug.js: $(FILES)
    cat $(FILES) > application-all-debug.js
 
clean:
    rm -f application-all-debug.js application-all.js
 
install: application-all.js
    # whatever you need to do to upload 
    # new version to production server

You can download yuicompressor here and you may need to install some “devel tools” and java on your Linux box for the above to run.

The Switch

We need a server-side logic that would generate the includes for individual files on the development system and one-file include on productions system. Decision what system it is running on can be also automatic. For example, our public, production web server has name extjs.eu and our development system has name extjs.localhost.

We can easily check if "extjs.localhost" === $_SERVER["SERVER_NAME"] and if yes we can run development branch if not we run production branch.

The Development Cycle

With all this in place, if you add a file you just add it to the file list, test it and debug it on the development system and if everything is works you issue the command:

make install

The compressed version is created and it is uploaded to your production system. The same is true for editing of a file, you only won’t modify your file list. If you delete file, just remove its line from file list and make install.

Conclusion

Hopefully this can make your developer’s life easier; I couldn’t live without it.

The complete working example of the above system is here, with manual switch for demonstration purposes.

Enjoy!