[SOLVED] [Ext 1.1.x] IE & Scrolling

[Lloyd K]

I'm having an odd issue with forms and IE, this only affects IE as it works fine in Firefox and Opera.

When I scroll the groups move but the controls stay put, you can see this in a quick AVI file I made:

http://www.lloydkinsella.net/forumbin/scrolly/scrolly.html

Is this a known issue or have I missed something?

[murraybozinsky]

Can you show the source code of your FORM?

[Lloyd K]

This is the dialog it sits in init code.


this.init = function(uid) {
// Set user id
this.userid = uid;

// Create dialog
this.dialog = new Ext.LayoutDialog("dvNewScheduleDialog", {
title: "New Schedule",
modal: true,
autoTabs: true,
resizable: false,
collapsible: false,
width: 600,
height: 600,
//minWidth: 600,
//minHeight: 600,
shadow: true,
autoTabs:true,
proxyDrag: true,
// layout config merges with the dialog config
center:{
//tabPosition: "top",
alwaysShowTabs: false,
autoScroll: true
},
south: {
split: true,
initialSize: 200,
titleBar: true,
title: "*"
},
//autoScroll: true,
resizable: true
});

// Add buttons and escape key handler
this.dialog.addKeyListener(27, this.dialog.hide, this.dialog);
this.dialog.addButton("OK", this.saveSchedule, this);
this.dialog.setDefaultButton(this.dialog.addButton ("Cancel", this.dialog.hide, this.dialog));

// Create form
this.form = new Ext.form.Form({
labelAlign: "left",
labelWidth: 120
});

// Create form layout
this.form.fieldset({
legend: "General"
},
new Ext.form.TextField({
fieldLabel: "Schedule Name",
name: 'schedule_name',
width: 400
}),
new Ext.form.ComboBox( {
fieldLabel: "Type",
name: "schedule_type",
width: 150,
store: new Ext.data.SimpleStore({
fields: ["key","value"],
data: [[1,"Reports"],[2,"Funnels"]]
}
),
displayField: "value",
valueField: "key",
limitToList: true,
forceSelection: true,
value: 1,
scope: this,
listeners: {
select: function(combo, record, index) {
// Take all grids out of editing
combo.scope.reportgrid.stopEditing();
combo.scope.funnelgrid.stopEditing();

// Get value from ddl
var value = record.get("key");

// Process by value
if (value == 1) {
// Switch to report grid
combo.scope.dialog.layout.beginUpdate();

combo.scope.dialog.layout.getRegion("south").remove(0,true);
combo.scope.dialog.layout.add("south",combo.scope.rgpanel);

combo.scope.reportgrid.render();

combo.scope.dialog.layout.endUpdate();

// Clear the funnels grid
var store = combo.scope.funnelgrid.getDataSource();

store.removeAll();
store.commitChanges();
} else {
// Switch to funnel grid
combo.scope.dialog.layout.beginUpdate();

combo.scope.dialog.layout.getRegion("south").remove(0,true);
combo.scope.dialog.layout.add("south",combo.scope.fgpanel);

combo.scope.funnelgrid.render();

combo.scope.dialog.layout.endUpdate();

// Clear the reports grid
var store = combo.scope.reportgrid.getDataSource();

store.removeAll();
store.commitChanges();
}
}
}
}),
new Ext.form.Checkbox( {
fieldLabel: "Enabled",
name: "schedule_enabled",
width: 20,
checked: true
})
);
this.form.end();

this.form.fieldset({
legend: "Output"
},
new Ext.form.ComboBox( {
fieldLabel: "Type",
name: "schedule_outputtype",
width: 150,
store: new Ext.data.SimpleStore({
fields: ["key","value"],
data: [
[1,"Engage"],
[2,"E-Mail"],
[3,"HTTP"],
[4,"FTP"]
]}
),
displayField: "value",
valueField: "key",
//limitToList: true,
forceSelection: true,
value: 1,
scope: this,
listeners: {
select: function(combo, record, index) {
var form = combo.scope.form;

// Disable controls
form.findField("schedule_email").disable();

if (form) {
var value = record.get("key");

// If e-mail, enable e-mail addresses box
if (value == 2) {
form.findField("schedule_email").enable();
}
}
}
}
}),
new Ext.form.TextField({
fieldLabel: "E-Mail",
name: 'schedule_email',
emptyText: "Enter addresses seperated by a ;",
width: 400
}),
new Ext.form.ComboBox( {
fieldLabel: "Format",
name: "schedule_format",
width: 200,
store: new Ext.data.SimpleStore({
fields: ["key","value"],
data: [
[1,"Excel"],
[2,"Excel (Multiple Worksheets)"],
[3,"Comma Seperated Values (CSV)"],
[4,"Tab Seperated Values (TSV)"],
[5,"XML"]
]}
),
displayField: "value",
valueField: "key",
limitToList: true,
forceSelection: true,
value: 1
}),
new Ext.form.NumberField({
fieldLabel: "Maximum Size",
name: "schedule_excelsize",
width: 200,
minValue: 1,
maxValue: 65000,
allowDecimals: false,
value: 65000
}),
new Ext.form.ComboBox({
fieldLabel: "Template",
name: "schedule_template",
width: 300,
store: new Ext.data.JsonStore({
root: "list",
totalProperty: "totalrecords",
fields: [
{name: "basevalue", mapping: "key"},
{name: "displayvalue", mapping: "value"}
],
baseParams: {
list: "scheduletemplates"
},
url: 'handlers/droplists.ashx'
}),
displayField: "value",
valueField: "key",
limitToList: true,
forceSelection: true,
value: 1,
disabled: true
})
);
this.form.end();

this.form.fieldset({
legend: "Recurrance"
});

this.form.container();
this.form.add(new Ext.form.ComboBox( {
fieldLabel: "Recurs",
name: "schedule_recurs",
width: 150,
store: new Ext.data.SimpleStore({
fields: ["key","value"],
data: [
[1,"Daily"],
[2,"Weekly"],
[3,"Monthly (By Date)"],
[4,"Monthly (By Day)"]
]}
),
displayField: "value",
valueField: "key",
limitToList: true,
forceSelection: true,
value: 1,
scope: this,
listeners: {
select: function(combo, record, index) {
var form = combo.scope.form;

if (form) {
var key = record.get("key");

// Disable all controls here
combo.scope.disableDays();
combo.scope.disableDateMonths();
combo.scope.disableDayMonths();

// Enabled controls based on key value
if (key == 1) {
// Daily, enable nothing
} else if (key == 2) {
// Weekly, enable days
combo.scope.enableDays();
} else if (key == 3) {
// Monthly (By Date)
combo.scope.enableDateMonths();
} else if (key == 4) {
// Monthly (By Day)
combo.scope.enableDayMonths();
}

}
}
}
}));
this.form.add(new Ext.form.ComboBox( {
autoCreate: {
tag: "input",
type: "text",
size: "7",
autocomplete: "off"
},
name: "schedule_time",
fieldLabel: "Time (GMT)",
size:10,
store: new Ext.data.JsonStore({
root: "list",
totalProperty: "totalrecords",
fields: [
{name: "basevalue", mapping: "key"},
{name: "displayvalue", mapping: "value"}
],
baseParams: {
list: "scheduletimes"
},
url: "handlers/droplists.ashx"
}),
displayField: 'displayvalue',
valueField: 'basevalue',
limitToList: true,
forceSelection: true,
mode:'remote',
triggerAction: 'all',
emptyText: '...',
selectOnFocus: true,
limitToList: true,
forceSelection: true,
resizable: false,
minChars: 2 // before type-ahead
}));
this.form.add(new Ext.form.ComboBox( {
autoCreate: {
tag: "input",
type: "text",
size: "7",
autocomplete: "off"
},
name: "schedule_month_dates",
fieldLabel: "Day of Month",
size:10,
store: new Ext.data.JsonStore({
root: "list",
totalProperty: "totalrecords",
fields: [
{name: "basevalue", mapping: "key"},
{name: "displayvalue", mapping: "value"}
],
baseParams: {
list: "monthdates"
},
url: "handlers/droplists.ashx"
}),
displayField: "displayvalue",
valueField: "basevalue",
limitToList: true,
forceSelection: true,
mode: "remote",
triggerAction: "all",
emptyText: "...",
selectOnFocus: true,
limitToList: true,
forceSelection: true,
resizable: false,
minChars: 2 // before type-ahead
}));
this.form.add(new Ext.form.ComboBox( {
autoCreate: {
tag: "input",
type: "text",
size: "14",
autocomplete: "off"
},
name: "schedule_month_days_when",
fieldLabel: "When",
size:10,
store: new Ext.data.SimpleStore({
fields: ["basevalue","displayvalue"],
data: [
[1,"First"],
[2,"Second"],
[3,"Third"],
[4,"Fourth"],
[5,"Last"]
]
}),
displayField: "displayvalue",
valueField: "basevalue",
limitToList: true,
forceSelection: true,
mode: "remote",
triggerAction: "all",
emptyText: "...",
selectOnFocus: true,
limitToList: true,
forceSelection: true,
resizable: false,
minChars: 2 // before type-ahead
}));
this.form.add(new Ext.form.ComboBox( {
autoCreate: {
tag: "input",
type: "text",
size: "14",
autocomplete: "off"
},
name: "schedule_month_days",
fieldLabel: "Days",
size: 10,
store: new Ext.data.SimpleStore({
fields: ["basevalue","displayvalue"],
data: [
[1,"Sunday"],
[2,"Monday"],
[3,"Tuesday"],
[4,"Wednesday"],
[5,"Thursday"],
[6,"Friday"],
[7,"Saturday"],
[8,"Day"],
[9,"Week Day"],
[10,"Weekend Day"]
]
}),
displayField: "displayvalue",
valueField: "basevalue",
limitToList: true,
forceSelection: true,
mode: "remote",
triggerAction: "all",
emptyText: "...",
selectOnFocus: true,
limitToList: true,
forceSelection: true,
resizable: false,
minChars: 2 // before type-ahead
}));
this.form.end();

this.form.fieldset({
legend: "Days"
});

this.form.container({});
this.form.column({
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_monday",
boxLabel: "Monday",
value: 2
}),
new Ext.form.Checkbox({
name: "schedule_tuesday",
boxLabel: "Tuesday",
value: 4
})
);
this.form.column({
labelSeparator: "",
labelWidth: 0,
width:100
},
new Ext.form.Checkbox({
name: "schedule_wednesday",
boxLabel: "Wednesday",
value: 8
}),
new Ext.form.Checkbox({
name: "schedule_thursday",
boxLabel: "Thursday",
value: 16
})
);
this.form.column({
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_friday",
boxLabel: "Friday",
value: 32
})
);
this.form.column({
//clear: true,
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_saturday",
boxLabel: "Saturday",
value: 64
}),
new Ext.form.Checkbox({
name: "schedule_sunday",
boxLabel: "Sunday",
value: 1
})
);
this.form.end();
this.form.end();

/*
this.form.fieldset({
legend: "Months"
});

this.form.container({});
this.form.column({
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_january",
boxLabel: "January",
value: 1
}),
new Ext.form.Checkbox({
name: "schedule_february",
boxLabel: "February",
value: 2
}),
new Ext.form.Checkbox({
name: "schedule_march",
boxLabel: "March",
value: 3
})
);
this.form.column({
labelSeparator: "",
labelWidth: 0,
width:100
},
new Ext.form.Checkbox({
name: "schedule_april",
boxLabel: "April",
value: 4
}),
new Ext.form.Checkbox({
name: "schedule_may",
boxLabel: "May",
value: 5
}),
new Ext.form.Checkbox({
name: "schedule_june",
boxLabel: "June",
value: 6
})
);
this.form.column({
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_july",
boxLabel: "July",
value: 7
}),
new Ext.form.Checkbox({
name: "schedule_august",
boxLabel: "August",
value: 8
}),
new Ext.form.Checkbox({
name: "schedule_september",
boxLabel: "September",
value: 9
})
);
this.form.column({
//clear: true,
labelSeparator: "",
labelWidth: 0,
width: 100
},
new Ext.form.Checkbox({
name: "schedule_october",
boxLabel: "October",
value: 10
}),
new Ext.form.Checkbox({
name: "schedule_november",
boxLabel: "November",
value: 11
}),
new Ext.form.Checkbox({
name: "schedule_december",
boxLabel: "December",
value: 12
})
);
this.form.end();
this.form.end();
*/

/*
this.form.fieldset({
legend: "Reports & Funnels"
},
new Ext.GridPanel(this.grid)
);
this.form.end();
*/

// Render form to dialog
this.form.render(this.dialog.layout.getRegion('cen ter').bodyEl);

// Create toolbar
var tbar = new Ext.Toolbar(this.dialog.layout.getRegion("south").titleEl,[{
iconCls: "storm-schedule-funreport-add",
text: "Add",
scope: this,
handler: function(btn){
var typeCombo = this.form.findField("schedule_type");

if (typeCombo) {
var value = typeCombo.getValue();

if (value == 1) {
// Reports
var ScheduledReport = Ext.data.Record.create([
{name: "reportTemplateId", type: "int"},
{name: "reportTemplateName", type: "string"},
{name: "reportName", type: "string"},
{name: "siteId", type: "int"},
{name: "siteName", type: "string"},
{name: "periodId", type: "int"},
{name: "periodText", type: "string"},
{name: "startDate", type: "date"},
{name: "endDate", type: "date"}
]);

// Create new record instance
var schedrep = new ScheduledReport({
reportTemplateId: null,
reportTemplateName: "",
reportName: null,
siteId: null,
siteName: null,
periodId: null,
periodText: null,
startDate: null,
endDate: null
});

// Stop any editing we are doing
this.reportgrid.stopEditing();

// Get the number of records currently held in the store
var count = this.reportgrid.getDataSource().getCount();

// Insert the new record and begin editing it
this.reportgrid.getDataSource().insert(count,sched rep);
this.reportgrid.startEditing(count,0);

// Select the new row
var selmodel = this.reportgrid.getSelectionModel();
selmodel.selectLastRow(false);
} else {
// Funnels
var ScheduledFunnel = Ext.data.Record.create([
{name: "funnelId", type: "int"},
{name: "funnelName", type: "string"},
{name: "funnelCustomName", type: "string"},
{name: "periodId", type: "int"},
{name: "periodText", type: "string"},
{name: "startDate", type: "date"},
{name: "endDate", type: "date"}
]);

// Create new record instance
var schedfun = new ScheduledFunnel({
funnelId: null,
funnelName: "",
funnelCustomName: "",
periodId: null,
periodText: null,
startDate: null,
endDate: null
});

// Stop any editing we are doing
this.reportgrid.stopEditing();

// Get the number of records currently held in the store
var count = this.funnelgrid.getDataSource().getCount();

// Insert the new record and begin editing it
this.funnelgrid.getDataSource().insert(count,sched fun);
this.funnelgrid.startEditing(count,0);

// Select the new row
var selmodel = this.funnelgrid.getSelectionModel();
selmodel.selectLastRow(false);
}
}
}
}]);

// Create grid editors
this.createEditors();

// Create report store
this.reportstore = new Ext.data.Store({
//proxy: new Ext.data.HttpProxy(new Ext.data.Connection({method: "GET", url: "handlers/grid.ashx?funnel=" + querystring.get("funnel",0), timeout: 240000})),
//proxy: new Ext.data.MemoryProxy(window.funnel),
//reader: new Ext.data.JsonReader({root: "pages", totalProperty: "count", id: "seq_num"}, [
reader: new Ext.data.JsonReader({
root: "scheduledReports"
//id: "seq_num"
}, [
{name: "reportTemplateId", mapping: "reportTemplateId", type: "int"},
{name: "reportTemplateName", mapping: "reportTemplateName", type: "string"},
{name: "reportName", mapping: "reportName", type: "string"},
{name: "siteId", mapping: "siteId", type: "int"},
{name: "siteName", mapping: "siteName", type: "string"},
{name: "periodId", mapping: "periodId", type: "int"},
{name: "periodText", mapping: "periodText", type: "string"},
{name: "startDate", mapping: "startDate", type: "date"},
{name: "endDate", mapping: "endDate", type: "date"}
]),
//remoteSort: true,
autoLoad: true
});

/*
this.reportstore.loadData({
scheduledReports: [
{
reportTemplateId: 0,
reportTemplateName: "Fred",
reportName: "Test",
siteId: 0,
siteName: "",
periodId: 0,
periodText: ""
}
]
});
*/

// Create report grid
this.reportgrid = new Ext.grid.EditorGrid("dvReportScheduleDialogReports",{
ds: this.reportstore,
cm: new Ext.grid.ColumnModel([
{
header: "Report",
width: 200,
dataIndex: "reportTemplateName",
editor: this.reportEditor
},{
header: "Report Name",
width: 200,
dataIndex: "reportName",
editor: new Ext.form.TextField()
},{
header: "Site",
width: 200,
dataIndex: "siteName",
editor: this.siteEditor
},{
header: "Period",
width: 150,
dataIndex: "periodText",
editor: this.periodEditor
},{
header: "Start Date",
width: 100,
dataIndex: "startDate",
editor: this.startdateEditor,
renderer: function(value) {
if (value) {
return value.format("Y-m-d");
} else {
return "";
}
}
},{
header: "End Date",
width: 100,
dataIndex: "endDate",
editor: this.enddateEditor,
renderer: function(value) {
if (value) {
return value.format("Y-m-d");
} else {
return "";
}
}
},{
header: "",
width: 20,
dataIndex: "reportTemplate",
renderer: gridDeleteButton
}
]),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
clicksToEdit: 1,
autoHeight: true,
autoWidth: true,
monitorWindowResize: true,
scope: this,
listeners: {
afteredit: function(e) {
var rec;
var grid = e.grid;
var scope = grid.scope;

if (e.field == "reportTemplateName") {
if (scope.reportEditor) {
rec = scope.reportEditor.store.getAt(scope.reportEditor. selectedIndex);
e.record.set("reportTemplateId",rec.get("basevalue"));
}
} else if (e.field == "siteName") {
if (scope.siteEditor) {
rec = scope.siteEditor.store.getAt(scope.siteEditor.sele ctedIndex);
e.record.set("siteId",rec.get("basevalue"));
}
} else if (e.field == "periodText") {
if (scope.periodEditor) {
rec = scope.periodEditor.store.getAt(scope.periodEditor. selectedIndex);
e.record.set("periodId",rec.get("basevalue"));
}
}

var store = grid.getDataSource();

if (store) store.commitChanges();
}
}
});

this.reportgrid.render();

this.rgpanel = new Ext.GridPanel(this.reportgrid, {
autoScroll: true
});

this.dialog.layout.add("south",this.rgpanel);

// Create funnel store
this.funnelstore = new Ext.data.Store({
//proxy: new Ext.data.HttpProxy(new Ext.data.Connection({method: "GET", url: "handlers/grid.ashx?funnel=" + querystring.get("funnel",0), timeout: 240000})),
//proxy: new Ext.data.MemoryProxy(window.funnel),
//reader: new Ext.data.JsonReader({root: "pages", totalProperty: "count", id: "seq_num"}, [
reader: new Ext.data.JsonReader({
root: "scheduledFunnels"
//id: "seq_num"
}, [
{name: "funnelId", mapping: "funnelId", type: "int"},
{name: "funnelName", mapping: "funnelName", type: "string"},
{name: "funnelCustomName", mapping: "funnelCustomName", type: "string"},
{name: "periodId", mapping: "periodId", type: "int"},
{name: "periodText", mapping: "periodText", type: "string"},
{name: "startDate", mapping: "startDate", type: "date"},
{name: "endDate", mapping: "endDate", type: "date"}
]),
//remoteSort: true,
autoLoad: true
});

/*
this.funnelstore.loadData({
scheduledFunnels: [{
funnelId: 0,
funnelName: "",
funnelCustomName: "",
periodId: 0,
periodText: ""
}]
});
*/

// Create funnel grid
this.funnelgrid = new Ext.grid.EditorGrid("dvReportScheduleDialogFunnels",{
ds: this.funnelstore,
cm: new Ext.grid.ColumnModel([
{
header: "Funnel",
width: 200,
dataIndex: "funnelName",
editor: this.funnelEditor
},{
header: "Funnel Name",
width: 200,
dataIndex: "funnelCustomName",
editor: new Ext.form.TextField()
},{
header: "Period",
width: 150,
dataIndex: "periodText",
editor: this.periodEditor
},{
header: "Start Date",
width: 100,
dataIndex: "startDate",
editor: this.startdateEditor,
renderer: function(value) {
if (value) {
return value.format("Y-m-d");
} else {
return "";
}
}
},{
header: "End Date",
width: 100,
dataIndex: "endDate",
editor: this.enddateEditor,
renderer: function(value) {
if (value) {
return value.format("Y-m-d");
} else {
return "";
}
}
},{
header: "",
width: 20,
dataIndex: "funnelName",
renderer: gridDeleteButton
}
]),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
clicksToEdit: 1,
autoHeight: true,
autoWidth: true,
monitorWindowResize: true,
scope: this,
listeners: {
afteredit: function(e) {
var rec;
var grid = e.grid;
var scope = grid.scope;

if (e.field == "funnelName") {
if (scope.funnelEditor) {
rec = scope.funnelEditor.store.getAt(scope.funnelEditor. selectedIndex);
e.record.set("funnelId",rec.get("basevalue"));
}
} else if (e.field == "periodText") {
if (scope.periodEditor) {
rec = scope.periodEditor.store.getAt(scope.periodEditor. selectedIndex);
e.record.set("periodId",rec.get("basevalue"));
}
}

var store = grid.getDataSource();

if (store) store.commitChanges();
}
}
});

//this.funnelgrid.render();

this.fgpanel = new Ext.GridPanel(this.funnelgrid, {
autoScroll: true
});

//this.dialog.layout.add("south",this.fgpanel);

//this.dialog.layout.endUpdate();

// Disable controls
this.disableDays();
this.disableDateMonths();
this.disableDayMonths();
}

[cornelius]

This thread is marked as [SOLVED] but I don't see a solution here. Could you post it here ?

[brian.moeskau]

This issue was specifically fixed in 2.0.1, which is why I assume that the thread is now marked closed. If you're having this issue, please upgrade.

[Lloyd K]

I'd just like to comment that upgrading to 2.0.1 from 1.1.x is NOT a solution considering the amount of work that would involve.

The solution was to put IE in quirks mode (i.e remove doctype depending on browser), thanks to the IRC guys for that one.

[brian.moeskau]

My apologies -- I actually didn't notice this was a 1.1 thread. I got to it using the "recent posts" link after it was bumped and just assumed it was 2.0 since all the other IE scrolling threads seem to have been 2.0-specific. Thanks for clarifying your workaround.

[evanc]

Is it possible to backport the fix from 2.0.1 to the 1.x branch?