Real hard problem concerning frames...

hi experts,

this is a real hard nut to crack...

I have a page with frames and want to generate and keep
the gridObject in the top-Framedocument where all my other
JS-Object reside so that every frame has easy access to global
objects...
I managed to get the Grid rendered, but every operation on the
grid (like mouse over, clicking, sorting etc.) is responsed
with errors...
what i am trying to achive is, that the grid is hold in the topframe
so that the SAME grid can be displayed again and again, keeping
its information about sorting, columnwidths and so on...
so to say some kind of "reference by object"

any suggestions?

to make it more clear, what i mean, i post the code... i think the problem lies in the fact, that the gridObjects references parts of its global data and scripts and if i display the gridObject in onother frame this relation gets broken. what i think is needed is to copy all references to the frame like:

Active = top.Active;
and so on... but (Alex..) which objects do i need to solve my problem?


<html>
<head>
<script src="webgrid/lib/grid.js"></script>

<script language=javascript>

var obj = new Active.Controls.Grid;
obj.setProperty("column/count", 5);
obj.setProperty("row/count", 5);
obj.setProperty("data/text", "some text");

</script>
</head>
<frameset rows=*,*>
<frame src=f1.html>
<frame src=f2.html>
</frameset>


<html>
<head>
<link href="webgrid/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
this is frame 1 on should display the grid thats defined in the top-document:

<script language=javascript>
document.write(top.obj);
</script>
</body>
</html>


<html>
<head>
</head>
<body>
this is frame 2...
</body>
</html>

How did you know that this one is hard :-) ???

Initially it was looking quite easy, just put this code into IFRAME:

//  copy object references into IFRAME

    var Active = top.Active;

    var mouseover = top.mouseover;

    var mouseout = top.mouseout;

    var dispatch = top.dispatch;



//  register IFRAME document

    top.obj._docs.push(document);



//  write the grid

    document.write(top.obj);



//  clean up

    window.onunload = function(){

        top.obj._docs.pop();

    }

However I found a problem with column resize, which has to be fixed with this patch (before you create a grid in your top frame):

Active.Templates.Header.patch = function(){



    var obj = this.prototype;



    var div = obj.getContent("div");



    div.setEvent("onmousedown", function(event){

        this.action("startColumnResize", this, event);

    });

};



Active.Templates.Header.patch();



Active.Controls.Grid.patch = function(){



    var obj = this.prototype;



    var startColumnResize = function(header, event){



        var el = header.element();

        var pos = event.clientX;

        var size = el.offsetWidth;

        var grid = this;



        var doResize = function(){

            var el = header.element();

            var sz = size + event.clientX - pos;

            el.style.width = sz < 5 ? 5 : sz;

            el = null;

        };



        var endResize = function(){



            var el = header.element();



            if( typeof el.onmouseleave == "function") {

                el.onmouseleave();

            }



            el.detachEvent("onmousemove", doResize);

            el.detachEvent("onmouseup", endResize);

            el.detachEvent("onlosecapture", endResize);

            el.releaseCapture();



            var width = size + event.clientX - pos;

            if (width < 5) {width = 5}

            el.style.width = width;



            var ss = el.document.styleSheets[el.document.styleSheets.length-1];

            var i, selector = "#" + grid.getId() + " .active-column-" + header.getItemProperty("index");

            for(i=0; i<ss.rules.length;i++){

                if(ss.rules[i].selectorText == selector){

                    ss.rules[i].style.width = width;

                    el = null;

                    grid.getTemplate("layout").action("adjustSize");

                    return;

                }

            }

            ss.addRule(selector, "width:" + width + "px");

            el = null;

            grid.getTemplate("layout").action("adjustSize");

        };



        el.attachEvent("onmousemove", doResize);

        el.attachEvent("onmouseup", endResize);

        el.attachEvent("onlosecapture", endResize);

        el.setCapture();



        el = null;



        event.cancelBubble = true;

    };



    obj.setAction("startColumnResize", startColumnResize);



};

Active.Controls.Grid.patch();

Also if you want it to work in Mozilla as well, you have to include IE emulation code into your IFRAME

<script src="../../source/lib/browsers/gecko.js"></script>

plus the following code

if (window.HTMLElement) {



    var element = HTMLElement.prototype;



    element.__defineGetter__("document", function(){

        return this.ownerDocument;

    });

}

P.S. But even with all the above you will not achieve your goal 100%. The column sizes are kept in a stylesheet, so you still have to copy them between frames. Scroll position is not retained too. So I still have a lot of things to fix for the next version...

i didÂ´nt have the time to try it out, but thank you very much for your efforts... iÂ´d wish to have only half the js-knowledge you have!

by the way... when do you think the "next version" will be available?
we will definitely buy a licence!

Forum search