Web db - getting the data back

Here is the code

    onError = function(tx, e) {
        alert('Something unexpected happened: ' + e.message );
    }

    var webdb = openDatabase(dbName, '1.0' , dbDesc , dbSi开发者_运维百科ze);

    var colourArray = new Array();

    webdb.transaction(function(tx) {
        tx.executeSql('SELECT * FROM colours', 
                      [], 
                      function(tx,rs) {
                        var ctn = rs.rows.length;
                        for (var i=0; i < ctn; i++) {
                            var row = rs.rows.item(i);                
                            colourArray.push([row.id , row.title]);
                        }   
                      }, 
                      onError);
    });
    /**
     * the array looks like [[1,'red'],[2,'white'],[3,'black'] ...]
     */
     var ColourStore = new Ext.data.ArrayStore({fields: ['key', 'val'],
                                               data: colourArray});

The table "colours" contain colour name and hash code. And it was suppose to be use by a ExtJS Ext.data.ArrayStore then populate other drop downs on a massive form.

My problem is - I couldn't get the data back as an array. The variable "colourArray" is empty ... I know I hit some javascript closure , loop problem ... but just couldn't figure out how to get that inner loop value back. Try a lot of return -> return -> return function and more return. None of them works.

executeSQL is asynchronous. You need to create ColourStore in the function(tx,rs) callback function. If you need the data available globally, you can't init your app until executeSQL calls the callback function. Example:

Ext.onReady( function() {
    var webdb = openDatabase(dbName, '1.0' , dbDesc , dbSize);

    var colourArray = new Array();
    var ColourStore;

    webdb.transaction( function(tx) {
        tx.executeSql('SELECT * FROM colours',
        [], function(tx,rs) {
            var ctn = rs.rows.length;
            for (var i=0; i < ctn; i++) {
                var row = rs.rows.item(i);
                colourArray.push([row.id , row.title]);
            }
            //INIT YOUR APP HERE IN ORDER TO HAVE ACCESS TO colourArray values
            ColourStore = new Ext....
            YourApp.init();
        },
        onError);
    });
}, this);