I need tips on tuning performance in IE. We are using IE8 and FF 3.5.8 to test. Below is a simplified, hard-coded example of one form from a set of forms we are loading dynamically. Basically, when a user clicks on a user name in the list grid it should reload the set of groups available for that user from the server and display them as checked if the user is already a member of that group. In FF this reload is instantaneous, but in IE can take 6-8 seconds. Although the volume of groups does dramatically affect the load time, this example with 100 checkboxes is typical of our data and we need it to load quickly in all browsers.
Any suggestions are very much appreciated. Thank you.
var groupSect = isc.SectionStack.create({
visibilityMode:“multiple”,
width: “100%”,
displayName:“Groups”,
overflow:“auto”,
autoDraw:false
});
isc.HLayout.create({
ID:“userAccountsHLayout”,
width: “100%”,
height: “100%”,
padding: parent.padBlueBorder,
members: [
isc.ListGrid.create({
ID: “userList”,
width: “20%”,
padding: parent.padBlueBorder,
alternateRecordStyles:true, cellHeight:22,
alternateRecordStyles:true, cellHeight:22,
fields:[
{name:“usercode”, title:“User Code”},
{name:“fname”, title:“First Name”},
{name:“lname”, title:“Last Name”},
{name:“coregroup”, title:“Group”}
],
groupStartOpen:“none”,
groupByField:“coregroup”,
recordClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
selectedUser2 = record;
loadDataForUser(record.userid);
}
}),
isc.LayoutSpacer.create({
height:“100%”,
ID:“userAccountsHLayoutsSpacer”,
width:8
}),
isc.HLayout.create({
width: “75%”,
height:“100%”,
ID: “userAcctsTabsFlow”,
padding: 3,
overflow:“auto”,
backgroundColor: “white”,
border: “1px solid darkgray”,
members: [groupSect]})
]
});
function loadUserListGrid() {
var userData = {“userinfo”:[{“lname”:“AA”,“usercode”:“AA”,“userid”:“14”,“coregroup”:“G1”,“fname”:“AA”},{“lname”:“Ad”,“usercode”:“AD”,“userid”:“1”,“coregroup”:“G2”,“fname”:“M”},{“lname”:“Am”,“usercode”:“AM”,“userid”:“2”,“coregroup”:“G3”,“fname”:“P”},{“lname”:“Ag”,“usercode”:“AG”,“userid”:“3”,“coregroup”:“G4”,“fname”:“A”},{“lname”:“Al”,“usercode”:“AL”,“userid”:“4”,“coregroup”:“G1”,“fname”:“M”},{“lname”:“Aq”,“usercode”:“AQ”,“userid”:“5”,“coregroup”:“G2”,“fname”:“L”},{“lname”:“Ar”,“usercode”:“AR”,“userid”:“6”,“coregroup”:“G3”,“fname”:“M”},{“lname”:“Ba”,“usercode”:“BA”,“userid”:“7”,“coregroup”:“G4”,“fname”:“M”},{“lname”:“Br”,“usercode”:“BR”,“userid”:“8”,“coregroup”:“G1”,“fname”:“S”},{“lname”:“Be”,“usercode”:“BE”,“userid”:“9”,“coregroup”:“G2”,“fname”:“J”},{“lname”:“Bh”,“usercode”:“BH”,“userid”:“10”,“coregroup”:“G3”,“fname”:“S”},{“lname”:“Bo”,“usercode”:“BO”,“userid”:“11”,“coregroup”:“G4”,“fname”:“M”},{“lname”:“Bu”,“usercode”:“BU”,“userid”:“12”,“coregroup”:“G1”,“fname”:“M”},{“lname”:“By”,“usercode”:“BY”,“userid”:“13”,“coregroup”:“G2”,“fname”:“M”}]};
userList.setData(userData.userinfo);
}
function createForm(){
var section = groupSect;
var numberOfCols=10
var columnWidths = [“20”,“150”,“20”,“150”,“20”,“150”,“20”,“150”,“20”,“150”];
var map = {“name”:“Groups”,“formId”:“groups”,“categoryId”:“8”,“fieldMap”:[{“name”:“281”,“fieldname”:“281”,“title”:“G”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“282”,“fieldname”:“282”,“title”:“G1”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“283”,“fieldname”:“283”,“title”:“G2”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“284”,“fieldname”:“284”,“title”:“G3”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“285”,“fieldname”:“285”,“title”:“G4”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“286”,“fieldname”:“286”,“title”:“G5”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“287”,“fieldname”:“287”,“title”:“G6”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“288”,“fieldname”:“288”,“title”:“G7”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“289”,“fieldname”:“289”,“title”:“G8”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“290”,“fieldname”:“290”,“title”:“G9”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“291”,“fieldname”:“291”,“title”:“G10”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“292”,“fieldname”:“292”,“title”:“G11”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“293”,“fieldname”:“293”,“title”:“G12”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“294”,“fieldname”:“294”,“title”:“G13”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“295”,“fieldname”:“295”,“title”:“G14”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“296”,“fieldname”:“296”,“title”:“G15”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“297”,“fieldname”:“297”,“title”:“G16”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“298”,“fieldname”:“298”,“title”:“G17”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“299”,“fieldname”:“299”,“title”:“G18”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“300”,“fieldname”:“300”,“title”:“G19”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“301”,“fieldname”:“301”,“title”:“G20”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“302”,“fieldname”:“302”,“title”:“G21”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“303”,“fieldname”:“303”,“title”:“G22”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“304”,“fieldname”:“304”,“title”:“G23”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“305”,“fieldname”:“305”,“title”:“G24”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“306”,“fieldname”:“306”,“title”:“G25”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“312”,“fieldname”:“312”,“title”:“G26”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“313”,“fieldname”:“313”,“title”:“G27”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“314”,“fieldname”:“314”,“title”:“G28”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“315”,“fieldname”:“315”,“title”:“G29”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“316”,“fieldname”:“316”,“title”:“G30”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“317”,“fieldname”:“317”,“title”:“G31”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“318”,“fieldname”:“318”,“title”:“G32”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“319”,“fieldname”:“319”,“title”:“G33”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“320”,“fieldname”:“320”,“title”:“G34”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“321”,“fieldname”:“321”,“title”:“G35”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“322”,“fieldname”:“322”,“title”:“G36”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“323”,“fieldname”:“323”,“title”:“G37”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“324”,“fieldname”:“324”,“title”:“G38”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“325”,“fieldname”:“325”,“title”:“G39”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“330”,“fieldname”:“330”,“title”:“G40”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“331”,“fieldname”:“331”,“title”:“G41”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“332”,“fieldname”:“332”,“title”:“G42”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“333”,“fieldname”:“333”,“title”:“G43”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“334”,“fieldname”:“334”,“title”:“G44”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“335”,“fieldname”:“335”,“title”:“G45”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“336”,“fieldname”:“336”,“title”:“G46”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“337”,“fieldname”:“337”,“title”:“G47”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“338”,“fieldname”:“338”,“title”:“G48”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“339”,“fieldname”:“339”,“title”:“G49”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“361”,“fieldname”:“361”,“title”:“G50”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“362”,“fieldname”:“362”,“title”:“G51”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“379”,“fieldname”:“379”,“title”:“G52”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“387”,“fieldname”:“387”,“title”:“G53”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“388”,“fieldname”:“388”,“title”:“G54”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“389”,“fieldname”:“389”,“title”:“G55”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“390”,“fieldname”:“390”,“title”:“G56”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“391”,“fieldname”:“391”,“title”:“G57”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“392”,“fieldname”:“392”,“title”:“G58”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“393”,“fieldname”:“393”,“title”:“G59”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“394”,“fieldname”:“394”,“title”:“G60”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“395”,“fieldname”:“395”,“title”:“G61”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“396”,“fieldname”:“396”,“title”:“G62”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“397”,“fieldname”:“397”,“title”:“G63”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“398”,“fieldname”:“398”,“title”:“G64”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“399”,“fieldname”:“399”,“title”:“G65”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“400”,“fieldname”:“400”,“title”:“G66”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“401”,“fieldname”:“401”,“title”:“G67”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“402”,“fieldname”:“402”,“title”:“G68”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“403”,“fieldname”:“403”,“title”:“G69”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“404”,“fieldname”:“404”,“title”:“G70”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“409”,“fieldname”:“409”,“title”:“G71”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“410”,“fieldname”:“410”,“title”:“G72”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“411”,“fieldname”:“411”,“title”:“G73”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“412”,“fieldname”:“412”,“title”:“G74”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“431”,“fieldname”:“431”,“title”:“G75”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“434”,“fieldname”:“434”,“title”:“G76”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“436”,“fieldname”:“436”,“title”:“G77”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“437”,“fieldname”:“437”,“title”:“G78”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“438”,“fieldname”:“438”,“title”:“G79”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“439”,“fieldname”:“439”,“title”:“G80”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“440”,“fieldname”:“440”,“title”:“G81”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“441”,“fieldname”:“441”,“title”:“G82”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“442”,“fieldname”:“442”,“title”:“G83”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“443”,“fieldname”:“443”,“title”:“G84”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“444”,“fieldname”:“444”,“title”:“G85”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“511”,“fieldname”:“511”,“title”:“G86”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“512”,“fieldname”:“512”,“title”:“G87”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“572”,“fieldname”:“572”,“title”:“G88”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“573”,“fieldname”:“573”,“title”:“G89”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“588”,“fieldname”:“588”,“title”:“G90”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“693”,“fieldname”:“693”,“title”:“G91”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“721”,“fieldname”:“721”,“title”:“G92”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“821”,“fieldname”:“821”,“title”:“G93”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“822”,“fieldname”:“822”,“title”:“G94”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“837”,“fieldname”:“837”,“title”:“G95”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“839”,“fieldname”:“839”,“title”:“G96”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”,“coregroup”:1},{“name”:“840”,“fieldname”:“840”,“title”:“G97”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”},{“name”:“841”,“fieldname”:“841”,“title”:“G98”,“titleAlign”:“left”,“showErrorStyle”:true,“type”:“boolean”}]};
var existingSections = section.getSections();
for(var i=0;i<existingSections.length;i++){
section.removeSection(0);
}
var formId = map.formId;
var formSpacer = formId + "Spacer";
var fieldsMap = map.fieldMap;
var sectionTitle = map.name;
var formName = map.categoryId;
var thisForm = isc.DynamicForm.create({
fixedColWidths: true,
cellPadding: 3,
titleSuffix: "",
requiredTitleSuffix: "",
ID: formId,
categoryID: formName,
formSectionTitle: sectionTitle,
fields: fieldsMap,
numCols: numberOfCols,
colWidths: columnWidths,
padding: 8,
styleName: "defaultBorder",
autoDraw:false
});
var spacer = isc.LayoutSpacer.create({
height: 20,
autoDraw:false
});
section.addSection({
title: sectionTitle,
autoShow: true,
canCollapse: false,
items: [thisForm, spacer]
});
var saveButton = isc.IButton.create({
title:"Save Changes",
ID:"Submit",
width:120,
layoutAlign:"right",
click: function() {saveFormData();}
});
section.addMember(saveButton);
}
function loadDataForUser(userIdFromGrid){
var data = {“values”:{“281”:true,“283”:true,“284”:true,“292”:true,“293”:true,“295”:true,“330”:true,“338”:true,“339”:true,“362”:true,“379”:true,“387”:true,“388”:true,“389”:true,“390”:true,“395”:true,“400”:true,“410”:true,“434”:true,“436”:true,“438”:true,“439”:true,“440”:true,“443”:true,“444”:true,“588”:true}};
createForm();
groups.setValues(data.values);
}
loadUserListGrid();
loadDataForUser(1);