:: Forum >> Version 1 >>

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
Sunday, December 11, 2005
*bump*

it's so quite... :c(
romz
Monday, December 12, 2005
Yes, sure, don't really understand what is the problem - just put everything into one js file :-)
Alex (ActiveWidgets)
Monday, December 12, 2005
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>
    <
stylebodyhtml {margin:0pxpadding0pxoverflowhidden;} </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 {height100%; fontmenu;}

        .
active-column-{width:  80px;}
        .
active-column-{width200px;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}

        .
active-grid-column {border-right1px solid threedlightshadow;}
        .
active-grid-row {border-bottom1px 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(ij){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>
    <
stylebodyhtml {margin:0pxpadding0pxoverflowhidden;} </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 {height100%; fontmenu;}

        .
active-column-{width:  80px;}
        .
active-column-{width200px;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}

        .
active-grid-column {border-right1px solid threedlightshadow;}
        .
active-grid-row {border-bottom1px 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(myDatamyColumns);[/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(myDatamyColumns) {
    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(ij){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
Thursday, December 15, 2005
nevermind, it already worked... :D

sorry for the bother...
romz
Thursday, December 15, 2005



This topic is archived.

Back to support forum

Forum search