PDA

View Full Version : Can't add form to window.



Mikush
16 Oct 2012, 2:24 AM
Hi. I'm using ExtJs 4.1.1.
I have very strange bug and can't understand the reason. I'm testing my application in IE 9 (it's a requirement). So I tried to create window with form containing file field. I created code like this:


Ext.define("test.AttachmentsUploader", {
extend: "Ext.window.Window",
width: 300,
alias: 'widget.attachmentsUploader',
title: 'Attach Files',
closeAction: 'hide',
bodyPadding: '5 5 0 5',
bbar: [{
xtype: 'button',
text: 'OK',
handler: function(){
var wnd = this.up('attachmentsUploader');
var form = wnd.down('form').getForm();
form.submit({
url: 'attachments/upload',
waitMsg: 'Uploading your documents...',
success: function(fp, o) {
var wnd = this.up('attachmentsUploader');
wnd.hide();
}
});
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function(){
var wnd = this.up('attachmentsUploader');
wnd.hide();
}
}],
items: [{
xtype: 'form'
border: 0,
items: [{
xtype: 'filefield',
id: 'form-file-1',
emptyText: 'Select a document',
fieldLabel: 'File',
name: 'files',
labelWidth: 25,
width: 275,
buttonText: 'Browse'
}]
}]
});

As you can see code is rather easy and should not cause any issues, but when I add "items" part I receive ExtJs error:

SCRIPT5022: The following classes are not declared even if their files have been loaded: 'Ext.layout.container.Card', 'Ext.tab.Bar', 'Ext.ux.StatusBar', 'Ext.tree.Panel', 'Ext.grid.column.Date', 'Ext.ux.RowExpander', 'wkt.controls.Link', 'Ext.selection.CellModel', 'Ext.data.NodeInterface', 'Ext.data.JsonPStore', 'Ext.data.association.BelongsTo', 'Ext.data.proxy.JsonP', 'Ext.data.association.HasMany', ... Please check the source code of their corresponding files for possible typos: 'extjs/src/layout/container/Card.js', 'extjs/src/tab/Bar.js', 'extjs/wkt/ux/StatusBar.js', 'extjs/src/tree/Panel.js', 'extjs/src/grid/column/Date.js', 'extjs/wkt/ux/RowExpander.js', 'extjs/wkt/controls/Link.js', 'extjs/src/selection/CellModel.js', 'extjs/src/data/NodeInterface.js', 'extjs/src/data/JsonPStore.js', 'extjs/src/data/association/BelongsTo.js', 'extjs/src/data/proxy/JsonP.js',...
And it contains all the classes! All of them! Classes from my application and ExtJs classes. The list is huge. How? How can my component cause loading failure for all another classes? Empty window works fine and doesn't say about any errors.
I also tried to change xtype: "form" to Ext.create('Ext.form.Panel', {}); but it didn't help. I got the same error.
The workaround I found was this:


listeners: {
afterrender: function(){
var form = Ext.create('Ext.form.Panel', {...});
this.add(form);
}
}

But i think this approach is not good. Does anybody have any ideas? The main problem is that my application is rather big and I can't provide all the codes it contains.
I just added button with method attachmentsUploader.show();

Also with such approach upload fails with "Access denied." in IE9. On line
form.submit(); in Connection.js#upload method.
And I can't upload anything.

scottmartin
16 Oct 2012, 6:48 AM
Please review the API on how to create component based classes:

eg: initComponent

Example
http://jsfiddle.net/QjVfu/

Scott.