Appendix A - a complete example without any lib

In blue methods provided by main_page.jsp.

<html>
    <head>
        <script language="Javascript">

            function loadScript(url, callback)\{

                // utility function always to include in any web page...
                var script = document.createElement("script")
                script.type = "text/javascript";

                if (script.readyState)\{  //IE
                    script.onreadystatechange = function()\{
                        if (script.readyState == "loaded" ||
                                script.readyState == "complete")\{
                            script.onreadystatechange = null;
                            callback();
                        \}
                    \};
                \} else \{  //Others
                    script.onload = function()\{
                        callback();
                    \};
                \}

                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
            \}

            // 3. callback invoked after the initialization
            var initCompleted = function() \{
              startApp();
            \}

            // 1. load dynamically the infra js...
            loadScript('../4ws/main_page.jsp?applicationId=XXX',function() \{
                // 2 after loading the infra js, initialize user data... 
                // that will load web pages variables (username, etc.) and initialize translations
                try \{
                    init(initCompleted);
                \}
                catch(e) \{
                    alert(e);
                \}
            \});

            // 4. login completed: start app
            var startApp = function() \{

                // fill in the first combobox
                fillInCombo(49,"myCombo",true);

                // fill in the second combobox
                fillInCombo(59,"myCombo2",true);

                // fill in the form combobox
                combo = fillInCombo(49,"country",true);

                window.myComboChanged = function(combo) \{
                    gridStore.load(\{
                      // here filtering conditions can be added, as well as startPos & blockSize...
                      filters: [\{
                          attrName: 'country',
                          op: '=',
                          value: combo.value
                      \}]
                    \});
                \}

                window.myCombo2Changed = function(combo) \{
                    gridStore.load(\{
                      // here filtering conditions can be added, as well as startPos & blockSize...
                      filters: [\{
                          attrName: 'abc',
                          op: '=',
                          value: combo.value
                      \}]
                    \});
                \}


                // create a grid datastore
                var gridStore = new ListStore(
                    149,
                    function() \{
                        // callback invoked after each data loading...
                        var numberFormatter2Dec = function(obj,decs,grouping) \{
                            return numberFormatter(obj,2,false);
                        \}
                        var list = gridStore.valueObjectList;
                        var myGrid = document.getElementById("myGrid");
                        while(myGrid.children.length>0)
                          myGrid.removeChild(myGrid.children[0]); // remove all previous rows...

                        for(var i=0;i<list.length;i++) \{
                          list[i].country = combo.code2Desc(list[i].country);
                          myGrid.append( createTableRow(
                              list[i],
                              ["clientCode","name","createDate","totalAmount","abc","country"],
                              [null,null,dateTimeFormatter,numberFormatter2Dec,null,null],
                              [150,400,160,120,80,200]
                          ) );
                        \}

                        // load also detail, with the first row in grid...
                        if (list.length>0)
                            formStore.load(\{
                                // filtering conditions needed to load a single record
                                filters: [\{ attrName: "clientCode",value: list[0].clientCode \}]
                            \});

                    \},
                    function() \{
                        // callback invoked after each data loading with errors...
                        alert('Ops');
                    \}
                );



                // create a form datastore
                var formStore = new FormStore(
                    159,
                    function() \{
                        // callback invoked after each data loading...
                        var controlClientCode = document.getElementById("clientCode");
                        var controlName = document.getElementById("name");
                        var controlCreateDate = document.getElementById("createDate");
                        var controlTotalAmount = document.getElementById("totalAmount");
                        var controlAbc = document.getElementById("abc");
                        var controlCountry = document.getElementById("country");
                        controlClientCode.value = formStore.vo.clientId;
                        controlName.value = formStore.vo.name;
                        controlCreateDate.value = dateFormatter( formStore.vo.createDate );
                        controlTotalAmount.value = currencyFormatter( formStore.vo.totalAmount );
                        controlAbc.value = formStore.vo.abc;
                        controlCountry.value = formStore.vo.country;
                    \},
                    function() \{
                         // callback invoked after each data loading with errors...
                       alert('Ops');
                    \}
                );

                gridStore.load(\{
                    // here filtering conditions can be added, as well as startPos & blockSize...
                \});

            \}

            // utility method
            function createTableRow(row,attributeNames,formatters,sizes) \{
                var tr = document.createElement("tr");
                for(var i=0;i<attributeNames.length;i++) \{
                  var td = document.createElement("td");
                  if (sizes!=null)
                    td.style="width:"+sizes[i];
                  tr.append(td);
                  var value = row[attributeNames[i]];
                  if (value==null)
                    value = "";
                  else if (formatters!=null && formatters[i]!=null) 
                      value = formatters[i](value);

                  var t = document.createTextNode( value );
                  td.append(t);
                \}
                return tr;
            \}

        </script>
    </head>
    <body>
        <select id="myCombo" onchange="myComboChanged(this);"></select>
        <br/>
        <select id="myCombo2" onchange="myCombo2Changed(this);"></select>
        <br/>
        <br/>
        <table id="myGrid" border=1></table>
        <br/>
        <table border=1 >
            <tr><td>Code</td><td><input type=text id="clientCode" style="width:200px" /></td></tr>
            <tr><td>Name</td><td><input type=text id="name" style="width:200px" /></td></tr>
            <tr><td>Date</td><td><input type=text id="createDate" style="width:200px" /></td></tr>
            <tr><td>Amount</td><td><input type=text id="totalAmount" style="width:200px" /></td></tr>
            <tr><td>ABC</td><td><input type=text id="abc"  /></td></tr>
            <tr><td>Country</td><td><select id="country" onchange=""></select></td></tr>
        </table>      
    </body>
</html>