After a lot of effort I have found out a way to extend dhtmlX objects. Here is how I did it in mogrid.js file:
function modgrid(p) {
this.superclass=dhtmlXGridObject;
this.superclass(p);
this.setImagePath("./codebase/imgs/");
this.setHeader("Column A, Column B");
this.setInitWidths("100,250");
this.setColAlign("right,left");
this.setColTypes("ro,ed");
this.setColSorting("int,str");
this.enableMultiselect(true);
this.init();
this.setSkin("dhx_skyblue");
this.loadXML("./common/grid.xml");
}
modgrid.prototype = new dhtmlXGridObject();This was working in previous versions of the controls. However, it isn’t working now when the script tags are placed on the header section of the HTML file. The code below does not work in the index.htm file.
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="./codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script type="text/javascript" src="./codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="./codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="./codebase/dhtmlxgridcell.js"></script>
</head>
<script type="text/javascript" src="./codebase/mogrid.js"></script>
<script type="text/javascript">
function start() {
try {
mygrid = new modgrid('gridbox');
} catch (e) {
alert(e);
}
}
</script>
<body onload="start()">
<div id="gridbox" style="width:350px;height:250px;background-color:white;overflow:hidden"></div>
</body>
</html>The problem occurs with the isTreeGrid, attachHeader, and loadXML functions. It used to work when placed in the header section when I did the applied IT project. I also found that when the script tags are placed within the body section the extended class works. The code below works:
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="./codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script type="text/javascript" src="./codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="./codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="./codebase/dhtmlxgridcell.js"></script>
</head>
<body>
<div id="gridbox" style="width:350px;height:250px;background-color:white;overflow:hidden"></div>
<script type="text/javascript" src="./codebase/mogrid.js"></script>
<script type="text/javascript">
function start() {
try {
mygrid = new modgrid('gridbox');
} catch (e) {
alert(e);
}
}
start();
</script>
</body>
</html>Any idea why?