wadebee
14 Aug 2008, 10:49 AM
This was posted on a different forum and Animal helped me come up with a workaround. At his suggestion I am posting the contents here...
====================================================================
Animal, Here is the code sample again. Using your feedback I have corrected my original layout. The form.submit() problem persists I have included some debug outputs to hopefully help analyze the problem...
Simple one-page html-only file named FormPanel.aspx.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Ajax.defaultHeaders = {
'Accept': 'application/json'
};
Ext.Ajax.disableCaching = false;
var dataProxy = new Ext.data.HttpProxy({
url: '/reports/'
, method: 'GET'
});
var dataReader = new Ext.data.JsonReader({
root: 'Data.Records'
, totalProperty: 'Data.RecordsFound'
, fields: [
{name:'Id', mapping:'Id.B', type: 'string'}
, {name:'ReportName',mapping:'Value', type: 'string'}
, {name:'ResponsibleDept', mapping:'RespDept', type: 'string'}
, {name:'AccessedBy', mapping:'Audit.AccessedBy.Value', type: 'string'}
, {name:'AccessedOn', mapping:'Audit.AccessedOn', type: 'string'}
]
});
var dataStore = new Ext.data.Store({
proxy: dataProxy
, reader: dataReader
, remoteSort: true
});
dataStore.on({
'load':{
fn: function(store, records, options){},scope:this
}
,'loadexception':{
fn: function(httpProxy, dataObject, args, exception){
alert(String.format('LoadException: ({0}) {2} [{1}]', exception.number, exception.name, exception.message));
}
,scope:this
}
});
var cm = new Ext.grid.ColumnModel([
{header: 'Id', dataIndex: 'Id', width: 25, id: 'Id'}
, {header: 'Report Name', dataIndex: 'ReportName',width: 485}
, {header: 'Dept', dataIndex: 'ResponsibleDept', width: 90}
, {header: 'Last Accessed By', dataIndex: 'AccessedBy', width: 130}
, {header: 'Last Accessed', dataIndex: 'AccessedOn', width: 80}
]);
var viewport = new Ext.Viewport({
id: 'viewPort'
, layout:'fit'
, items: [
new Ext.FormPanel({
id: 'workForm'
, standardSubmit: true
, url: 'http://localhost/willNotGoHere'
, method: 'GET'
, height: 800
, items: [
new Ext.grid.GridPanel({
id:'extGrid'
, width: 900
, height: 738
, title: 'Reports'
, store: dataStore
, cm: cm
, sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, record) {
var myForm = Ext.getCmp('workForm');
var waitMessage = String.format('Please wait while preparing {0} report.', record.data.ReportName);
Ext.getBody().mask(waitMessage, 'x-mask-loading');
debugger
myForm.getForm().submit();
}
}
})
, trackMouseOver:true
})
]
})
]
})
dataStore.load({params:{start:0, limit:30}});
})
</script>
</head>
<body>
</body>
</html>When the debugger breaks at the debugger statement in the RowSelectionModel handler above, I did a dump of myForm and myForm.form. Here is what they look like....
?myForm
{...}
actionMode: "el"
allowDomMove: false
animCollapse: true
autoDestroy: true
autoShow: false
baseCls: "x-panel"
bbar: null
bbarCls: "x-panel-bbar"
body: {...}
bodyCfg: {...}
bodyCls: "x-panel-body"
boxReady: true
buttonAlign: "center"
bwrap: {...}
bwrapCls: "x-panel-bwrap"
collapsed: false
collapsedCls: "x-panel-collapsed"
collapseDefaults: {...}
collapseEl: "bwrap"
collapseFirst: true
container: {...}
ctype: "Ext.Component"
defaultType: "panel"
deferHeight: true
disabled: false
disabledClass: ""
el: {...}
elements: "body"
events: {...}
expandDefaults: {...}
filterOptRe: /^(?:scope|delay|buffer|single)$/
footer: null
footerCls: "x-panel-footer"
form: {...}
frame: true
fromMarkup: true
header: null
headerAsText: true
headerCls: "x-panel-header"
headerTextCls: "x-panel-header-text"
height: 800
hidden: false
hideMode: "display"
hideParent: false
id: "workForm"
initialConfig: {...}
items: {...}
labelAlign: "left"
labelWidth: 100
lastSize: {...}
layout: {...}
maskDisabled: true
method: "GET"
minButtonWidth: 75
monitorPoll: 200
monitorValid: false
rendered: true
slideAnchor: "t"
standardSubmit: true
tbar: null
tbarCls: "x-panel-tbar"
tools: {...}
toolTarget: "header"
url: "http://localhost/willNotGoHere"
?myForm.form
{...}
activeAction: null
el: {...}
events: {...}
filterOptRe: /^(?:scope|delay|buffer|single)$/
frame: true
height: 800
id: "ext-gen7"
items: {...}
method: "GET"
standardSubmit: true
timeout: 30
trackResetOnLoad: false
url: "http://localhost/willNotGoHere"
I can also run a myForm.form.submit() directly from the debugger and watch the response in Fiddler. Here is the request...
GET /FormPanel.aspx? HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-silverlight, */*
Referer: http://localhost/FormPanel.aspx
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Host: localhost
Connection: Keep-Alive
Authorization: Negotiate TlRMTVNTUAADAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAABcKIogUBKAoAAAAP
You can see that the FormPanel config initializer property 'url' is set and passed through to the FormPanel's internal Ext.form.BasicForm object however the calls to submit() ignore the setting as if it did not exist and simply calls the same page.
I decided to debug into version 2.2 of ext-all-debug.js and got to this section starting at 28523
submit : function(options){
if(this.standardSubmit){
var v = this.isValid();
if(v){
// HACKED this.el.dom.action = this.url;
this.el.dom.submit();
}
return v;
}
this.doAction('submit', options);
return this;
},
When I put a watch on this.el.dom I see that the action property is in fact empty which is what I thought was happening. I added the code in the HACKED remark and it now works properly. Not sure what to do with this. Is this really a bug or am I configuring something wrong which is preventing this.el.dom from being set properly? Even though this hack works, I hate to leave it like this. Suggestions?
======================================================
Here is Animal's workaround
I think it's a bug.
FormPanel.initComponent needs to be
initComponent :function(){
this.form = this.createForm();
this.bodyCfg = {
tag: 'form',
cls: this.baseCls + '-body',
action : this.url || '',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
Ext.FormPanel.superclass.initComponent.call(this);
this.addEvents(
/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);
this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},
And BasicForm.submit needs to be
submit : function(options){
if(this.standardSubmit){
var v = this.isValid();
if(v){
boolean removeAction = false;
if (options.url || this.url) {
this.el.dom.action = options.url || this.url;
}
this.el.dom.submit();
}
return v;
}
this.doAction('submit', options);
return this;
},
Do you want to report this in the Bugs folder?
====================================================================
Animal, Here is the code sample again. Using your feedback I have corrected my original layout. The form.submit() problem persists I have included some debug outputs to hopefully help analyze the problem...
Simple one-page html-only file named FormPanel.aspx.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Ajax.defaultHeaders = {
'Accept': 'application/json'
};
Ext.Ajax.disableCaching = false;
var dataProxy = new Ext.data.HttpProxy({
url: '/reports/'
, method: 'GET'
});
var dataReader = new Ext.data.JsonReader({
root: 'Data.Records'
, totalProperty: 'Data.RecordsFound'
, fields: [
{name:'Id', mapping:'Id.B', type: 'string'}
, {name:'ReportName',mapping:'Value', type: 'string'}
, {name:'ResponsibleDept', mapping:'RespDept', type: 'string'}
, {name:'AccessedBy', mapping:'Audit.AccessedBy.Value', type: 'string'}
, {name:'AccessedOn', mapping:'Audit.AccessedOn', type: 'string'}
]
});
var dataStore = new Ext.data.Store({
proxy: dataProxy
, reader: dataReader
, remoteSort: true
});
dataStore.on({
'load':{
fn: function(store, records, options){},scope:this
}
,'loadexception':{
fn: function(httpProxy, dataObject, args, exception){
alert(String.format('LoadException: ({0}) {2} [{1}]', exception.number, exception.name, exception.message));
}
,scope:this
}
});
var cm = new Ext.grid.ColumnModel([
{header: 'Id', dataIndex: 'Id', width: 25, id: 'Id'}
, {header: 'Report Name', dataIndex: 'ReportName',width: 485}
, {header: 'Dept', dataIndex: 'ResponsibleDept', width: 90}
, {header: 'Last Accessed By', dataIndex: 'AccessedBy', width: 130}
, {header: 'Last Accessed', dataIndex: 'AccessedOn', width: 80}
]);
var viewport = new Ext.Viewport({
id: 'viewPort'
, layout:'fit'
, items: [
new Ext.FormPanel({
id: 'workForm'
, standardSubmit: true
, url: 'http://localhost/willNotGoHere'
, method: 'GET'
, height: 800
, items: [
new Ext.grid.GridPanel({
id:'extGrid'
, width: 900
, height: 738
, title: 'Reports'
, store: dataStore
, cm: cm
, sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, record) {
var myForm = Ext.getCmp('workForm');
var waitMessage = String.format('Please wait while preparing {0} report.', record.data.ReportName);
Ext.getBody().mask(waitMessage, 'x-mask-loading');
debugger
myForm.getForm().submit();
}
}
})
, trackMouseOver:true
})
]
})
]
})
dataStore.load({params:{start:0, limit:30}});
})
</script>
</head>
<body>
</body>
</html>When the debugger breaks at the debugger statement in the RowSelectionModel handler above, I did a dump of myForm and myForm.form. Here is what they look like....
?myForm
{...}
actionMode: "el"
allowDomMove: false
animCollapse: true
autoDestroy: true
autoShow: false
baseCls: "x-panel"
bbar: null
bbarCls: "x-panel-bbar"
body: {...}
bodyCfg: {...}
bodyCls: "x-panel-body"
boxReady: true
buttonAlign: "center"
bwrap: {...}
bwrapCls: "x-panel-bwrap"
collapsed: false
collapsedCls: "x-panel-collapsed"
collapseDefaults: {...}
collapseEl: "bwrap"
collapseFirst: true
container: {...}
ctype: "Ext.Component"
defaultType: "panel"
deferHeight: true
disabled: false
disabledClass: ""
el: {...}
elements: "body"
events: {...}
expandDefaults: {...}
filterOptRe: /^(?:scope|delay|buffer|single)$/
footer: null
footerCls: "x-panel-footer"
form: {...}
frame: true
fromMarkup: true
header: null
headerAsText: true
headerCls: "x-panel-header"
headerTextCls: "x-panel-header-text"
height: 800
hidden: false
hideMode: "display"
hideParent: false
id: "workForm"
initialConfig: {...}
items: {...}
labelAlign: "left"
labelWidth: 100
lastSize: {...}
layout: {...}
maskDisabled: true
method: "GET"
minButtonWidth: 75
monitorPoll: 200
monitorValid: false
rendered: true
slideAnchor: "t"
standardSubmit: true
tbar: null
tbarCls: "x-panel-tbar"
tools: {...}
toolTarget: "header"
url: "http://localhost/willNotGoHere"
?myForm.form
{...}
activeAction: null
el: {...}
events: {...}
filterOptRe: /^(?:scope|delay|buffer|single)$/
frame: true
height: 800
id: "ext-gen7"
items: {...}
method: "GET"
standardSubmit: true
timeout: 30
trackResetOnLoad: false
url: "http://localhost/willNotGoHere"
I can also run a myForm.form.submit() directly from the debugger and watch the response in Fiddler. Here is the request...
GET /FormPanel.aspx? HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-silverlight, */*
Referer: http://localhost/FormPanel.aspx
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Host: localhost
Connection: Keep-Alive
Authorization: Negotiate TlRMTVNTUAADAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAABcKIogUBKAoAAAAP
You can see that the FormPanel config initializer property 'url' is set and passed through to the FormPanel's internal Ext.form.BasicForm object however the calls to submit() ignore the setting as if it did not exist and simply calls the same page.
I decided to debug into version 2.2 of ext-all-debug.js and got to this section starting at 28523
submit : function(options){
if(this.standardSubmit){
var v = this.isValid();
if(v){
// HACKED this.el.dom.action = this.url;
this.el.dom.submit();
}
return v;
}
this.doAction('submit', options);
return this;
},
When I put a watch on this.el.dom I see that the action property is in fact empty which is what I thought was happening. I added the code in the HACKED remark and it now works properly. Not sure what to do with this. Is this really a bug or am I configuring something wrong which is preventing this.el.dom from being set properly? Even though this hack works, I hate to leave it like this. Suggestions?
======================================================
Here is Animal's workaround
I think it's a bug.
FormPanel.initComponent needs to be
initComponent :function(){
this.form = this.createForm();
this.bodyCfg = {
tag: 'form',
cls: this.baseCls + '-body',
action : this.url || '',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
Ext.FormPanel.superclass.initComponent.call(this);
this.addEvents(
/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);
this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},
And BasicForm.submit needs to be
submit : function(options){
if(this.standardSubmit){
var v = this.isValid();
if(v){
boolean removeAction = false;
if (options.url || this.url) {
this.el.dom.action = options.url || this.url;
}
this.el.dom.submit();
}
return v;
}
this.doAction('submit', options);
return this;
},
Do you want to report this in the Bugs folder?