dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
297 lines • 9.65 kB
HTML
<html dir="ltr">
<head>
<title>EnhancedGrid Memory Leak Test - Great/Destroy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-right: 5em;
}
.title {
text-align:center;
margin:1em;
}
.supporter {
display: block;
border: 3px solid #ccc;
width: 100em;
padding: 1em 3em;
cursor: default;
radius: 8pt;
background: #fff;
-moz-border-radius: 8pt 8pt;
}
.selectReport {
display: inline-block;
}
.tutor h2{
font-weight: bolder;
}
.tutor td:first-child{
font-weight: bolder;
}
#gridContainer{
width: 100em;
height: 35em;
border: 1px solid #D5CDB5;
}
/*Sample - overwrite default cell style
.claro .dojoxGridCell{
border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
}
.dj_ie6 .claro .dojoxGridCell{
border: 1px solid #F1F1F1 !important;
}*/
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit._WidgetsInTemplateMixin");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter");
dojo.require("dojox.grid.enhanced.plugins.Printer");
dojo.require("dojox.grid.enhanced.plugins.Cookie");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Selector");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojox.grid.enhanced.plugins.DnD");
dojo.require("dojox.grid.enhanced.plugins.Search");
dojo.require("dojox.grid.enhanced.plugins.CellMerge");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojox.grid.enhanced.plugins.GridSource");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.parser");
var startGridIndex = 0,
initialShowGrid = false,
hideCtrlPanel = false,
repeatCount = 100000,
repeatInterval = 500;
gridAttrs = {
rowsPerPage: 5,
keepSelection: true,
plugins: {}
};
</script>
<script type="text/javascript" src="support/test_write_store_music.js"></script>
<script type="text/javascript" src="support/test_layout_music.js"></script>
<script type="text/javascript" src="support/test_repeat.js"></script>
<script type="text/javascript">
var plugins = {
"nestedSorting": {},
"indirectSelection": {
headerSelector: true
},
"menus": {
headerMenu: "headerMenu",
rowMenu: "rowMenu",
cellMenu: "cellMenu",
selectedRegionMenu: "selectedRegionMenu"
},
"exporter": {},
"printer": {},
"filter": {
closeFilterbarButton: true,
ruleCount: 0
},
"cookie": {},
"selector": {
col: false
},
"dnd": {
copyOnly: false
},
"cellMerge": {
"mergedCells": [
{row: "3", start: 1, end: 10, major: 3}
]
},
"search": {},
"pagination":
{
pageSizes: ["5", "10", "20", "50", "All"], // Array, custom the items per page button
// itemTitle: "entrys", // String, custom the item' title of description
description: true, // boolean, custom weather or not the discription will be displayed
sizeSwitch: true, // boolean, custom weather or not the page size switch will be displayed
pageStepper: true, // boolean, custom weather or not the page step will be displayed
gotoButton: true,
maxPageStep: 10, // Integer, custom how many page step will be displayed
position: "bottom" // String, custom the position of the paginator bar
// there're three options: top, bottom, both
// ,descTemplate: "${1} ${0}" // A template of the current position description.
}
};
var gridFeatures = {
"canSort": {
label: "disable canSort",
value: function(colIndex){
return false;
}
},
"rowSelector": {
value: "20px"
},
"autoHeight": {
value: true
},
"autoWidth": {
value: true
},
"singleClickEdit": {
value: true
},
"selectionMode": {
label: "single selectionMode",
value: "single"
},
"columnReordering": {
value: true
}
};
function getTableString(){
var sb = ["<table><tbody>"];
for(var featureName in gridFeatures){
sb.push("<tr>");
sb.push("<td><input id='cbid", featureName,
"' dojoType='dijit.form.CheckBox' dojoAttachPoint='cb", featureName,
"'><label id='lbl", featureName, "' for='cbid", featureName, "'>",
gridFeatures[featureName].label || featureName, "</label></input></td>"
);
sb.push("</tr>");
}
sb.push("<tr><td><hr/></td></tr>",
"<tr><td><button onclick='selectAll()'>Select All</button>",
"<button onclick='deselectAll()'>Deselect All</button></td></tr>"
);
for(var pluginName in plugins){
sb.push("<tr>");
sb.push("<td><input id='cbid", pluginName,
"' dojoType='dijit.form.CheckBox' dojoAttachPoint='cb", pluginName,
"'><label id='lbl", pluginName, "' for='cbid", pluginName, "'>",
pluginName, "</label></input></td>"
);
sb.push("</tr>");
}
sb.push("</tbody></table>");
return sb.join('');
}
dojo.declare("PluginTable", [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
templateString: getTableString(),
widgetsInTemplate: true,
_onChangePlugin: function(pluginName, cb, e){
var checked = cb.get("checked");
gridAttrs.plugins[pluginName] = checked ? plugins[pluginName] : false;
var nd = dojo.byId(pluginName + "Support");
if(nd){
dojo.style(nd, "display", checked ? "" : "none");
}
},
_onChangeFeature: function(featureName, cb, e){
var checked = cb.get("checked");
if(checked){
gridAttrs[featureName] = gridFeatures[featureName].value;
}else{
delete gridAttrs[featureName];
}
},
postCreate: function(){
var cb;
for(var featureName in gridFeatures){
cb = this["cb" + featureName];
this.connect(cb, "onChange", dojo.hitch(this, "_onChangeFeature", featureName, cb));
}
for(var pluginName in plugins){
cb = this["cb" + pluginName];
this.connect(cb, "onChange", dojo.hitch(this, "_onChangePlugin", pluginName, cb));
}
}
});
function selectAll(){
for(var pluginName in plugins){
dijit.byId("cbid" + pluginName).set("checked", true);
}
}
function deselectAll(){
for(var pluginName in plugins){
dijit.byId("cbid" + pluginName).set("checked", false);
}
}
function setupSelectorTest(){
var grid = dijit.byId("grid"),
func = function(type, start, end, selected){
fill("col", selected["col"]);
fill("row", selected["row"]);
fill("cell", selected["cell"]);
},
fill = function(type, selected){
var getString;
var cells = grid.layout.cells;
switch(type){
case "col":
getString = function(item){
return "Column " + item.col + ": " + dojo.toJson(item.except);
}
break;
case "row":
getString = function(item){
return "Row " + item.row + ": " + dojo.toJson(item.except);
}
break;
case "cell":
getString = function(item){
return "Cell " + item.row + " , " + item.col;
}
}
};
}
dojo.addOnLoad(function(){
dojo.subscribe("test_repeat_grid_created", function(){
var g = dijit.byId("grid");
g && g.setCookieEnabled && g.setCookieEnabled(false);
});
});
</script>
</head>
<body class="claro">
<h1 class="title">EnhancedGrid Memory Leak Test - Great/Destroy</h1>
<h2><p>Repeat creating/destroying Grid instances:</p></h2>
<div id="ctrlBtns"></div><br/>
<div id="pluginList" dojoType="PluginTable" style="float:right;"></div>
<div id="gridContainer"></div><br/>
<div id="ctrlBtns2"></div><br/>
<div id="menusSupport" style="display: none;">
<div dojoType="dijit.Menu" id="headerMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Header Menu Item 1</div>
<div dojoType="dijit.MenuItem">Header Menu Item 2</div>
<div dojoType="dijit.MenuItem">Header Menu Item 3</div>
<div dojoType="dijit.MenuItem">Header Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Row Menu Item 1</div>
<div dojoType="dijit.MenuItem">Row Menu Item 2</div>
<div dojoType="dijit.MenuItem">Row Menu Item 3</div>
<div dojoType="dijit.MenuItem">Row Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="cellMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Cell Menu Item 1</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 2</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 3</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="selectedRegionMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Action 1 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 2 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 3 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 4 for Selected Region</div>
</div>
</div>
</body>
</html>