Segregate/Centralize ActiveWidgets script into a script (.js) file

Is there any workaround wherein you can segregate the whole grid script from the page to a script (.js) file? Is it possible to centralize it to a .js file so you could reuse it to other pages without retyping it all over again to save time and space?

romz

December 11,

*bump*

it's so quite... :c(

romz

December 12,

Yes, sure, don't really understand what is the problem - just put everything into one js file :-)

Alex (ActiveWidgets)

December 12,

But most of the samples, the script for the grid are on the page most of the time. Is there a way to isolate it?

As of now, the code looks like these:

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>

    <!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>
    <script>

    //	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    //	set headers width/height
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");

    //	set click action handler
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

    //	write grid html to the page
    document.write(obj);

    </script>
</body>

</html>

These is the page what I'm talking about:

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>
    [b]<script src="../../js/datagrid.js"></script>
[/b]
    <!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>
    <script>

    //	create ActiveWidgets Grid javascript object
    [b]var obj = function grid(myData, myColumns);[/b]

    //	write grid html to the page
    document.write(obj);

    </script>
</body>

</html>

And the centralized/isolated grid script is in datagrid.js

function grid(myData, myColumns) {
    var obj = new Active.Controls.Grid;
    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    //	set headers width/height
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");

    //	set click action handler
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
    
    return obj;
}

I hope you can get it now...

I could just pass the needed parameters to a javascript function coded on a .js file where most of the grid script is located like above then return the resulting object to write to the page. Is this possible? If it is, I want to see a working example, since I can't make it work...

Could you help me Alex... Thanks!

romz

December 15,

nevermind, it already worked... :D

sorry for the bother...

romz

December 15,

This topic is archived.

Segregate/Centralize ActiveWidgets script into a script (.js) file

See also:

Search

New Data Grid

Version 2