PDA

View Full Version : Call same window twice



rishi89
6 Jul 2010, 10:59 PM
Hi there,

I am uploading files using a plain window to do so.

I want multiple uploads to be going on simultaneously. But as the current upload is in progress, the new upload window isnt rendered properly. The text fields, the upload field, everything is corrupted.

Can I call the same window twice, without destroying the current one ?

chrizmaster
7 Jul 2010, 12:49 AM
sure you can.
but be careful not to use an id of an element twice, as well as don't use a local variable twice.
for example this is not possible:



var win = new Ext.Window({
width:640,
height:480
id:'test'
})

//first call
win.show()
//second call
win.show()
BUT this for example is possible


new Ext.Window({
width:640,
height:480
id:Ext.id()
}).show();
(call this twice)

Condor
7 Jul 2010, 1:58 AM
You can't show the same component twice, but you could create 2 windows from the same config and show them both.

Note: The window config can't contain 'id's, because they need to be unique.

chrizmaster
7 Jul 2010, 2:07 AM
aehm... isn't it the same as i said condor?

Condor
7 Jul 2010, 2:23 AM
Yes, but I tried to clarify that there are two reasons why your first example doesn't work.

chrizmaster
7 Jul 2010, 2:48 AM
ah ok, I thought I missed something...

rishi89
7 Jul 2010, 3:37 AM
Even with the same changes as told by chrizmaster, I get the same problem - The text fields and the file selector gets repeated again.. Should I post my code here ?

chrizmaster
7 Jul 2010, 3:41 AM
Should I post my code here ?

Would be an awesome idea ;)

rishi89
7 Jul 2010, 3:45 AM
fileUpload:function(spaceHash, saveHandler, extraParams){
var win;
var fp;
Ext.apply(Ext.form.VTypes,{
AlphaNum: function(v) {
return /[a-z0-9\s]/i.test(v);
},
AlphaNumText: 'Must be an alphanumeric word',
AlphaNumMask: /[a-z0-9\s]/i
});
win = new Ext.Window({
id : Ext.id(),
title : 'File Upload Form',
renderTo : document.body,
layout : 'fit',
width : 600,
autoHeight : true,
closeAction : 'close',
items : fp = new Ext.FormPanel({
id : 'form-panel',
fileUpload : true,
width : 500,
autoHeight : true,
frame : true,
bodyStyle : 'padding: 10px 10px 0 10px;',
labelWidth : 50,
defaults :
{
anchor : '95%',
msgTarget : 'side'
},
items: [{
id: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
vtype: 'AlphaNum',
},{
xtype: 'textfield',
id: 'form-file',
fieldLabel: 'Browse',
inputType: 'file',
name: 'path',
},{
id: 'key1',
xtype: 'textfield',
fieldLabel: 'Key 1',
name: 'key1',
},{
id: 'value1',
xtype: 'textfield',
fieldLabel: 'Value 1',
name: 'value1',
},{
id: 'key2',
xtype: 'textfield',
fieldLabel: 'Key 2',
name: 'key2',
},{
id: 'value2',
xtype: 'textfield',
fieldLabel: 'Value 2',
name: 'value2',
}],
buttons: [{
text: 'Save',
name: 'Submit',
handler: function(w){
w.disable();
var uploadHash = spaceHash;
uploadHash[Ext.getCmp('key1').getValue()]=Ext.getCmp('value1').getValue();
uploadHash[Ext.getCmp('key2').getValue()]=Ext.getCmp('value2').getValue();
if(fp.getForm().isValid()){
Ext.Ajax.request({
form: fp.getForm().getEl().dom,
isUpload: true,
headers: {'Content-type':'multipart/form-data'},
scope: this,
url: CDN.baseUrl+'upload.php',
params:{
'title': Ext.getCmp('title').getValue(),
'file': Ext.getCmp('form-file').getValue(),
'hash': JSON.stringify(uploadHash)
},
method: 'post',
success: function(o){
var objHash = '';
console.log(o);
var res = eval('('+o.responseText+')');
for(var p in res){
objHash += p + " => "+res[p]+" ";
}
CDN.msg('Success', 'The uploaded object\'s hash is -- '+objHash);
saveHandler(o, spaceHash, extraParams);
win.close(this);
},
failure: function(o){
CDN.msg('Failure', 'Cannot upload file.');
saveHandler(o, spaceHash, extraParams);
win.close(this);
}
});
}
}
}]
})
});
win.show(this);
},

chrizmaster
7 Jul 2010, 4:03 AM
you'll render that to the document body. what is your problem now? do you call the function twice..?

Condor
7 Jul 2010, 4:04 AM
Again: You can't use unique ids if you are going to create multiple instances.

It's probably easiest to replace id with itemId and start using:

var form = w.getComponent('form-panel');
var fileField = form.getForm().findField('path');

rishi89
7 Jul 2010, 4:11 AM
Yea.. Say I am uploading a 20 MB video using the above window. The window doesn't disappear till the upload is finished. But ow I want to simultaneously upload something else, using the same window. And when i call this window again, I get this..

21315

Thats my problem, I want to render the same window again, without destroying the first instance of the window..

And btw, thanks for taking an interest in my woes.. :)

rishi89
26 Jul 2010, 4:04 AM
*bump*

Condor
26 Jul 2010, 4:15 AM
Did you remove the 'id' config options or replaced them with 'itemId'?

rishi89
26 Jul 2010, 4:28 AM
Did you remove the 'id' config options or replaced them with 'itemId'?

I replaced with 'itemId' for the text fields, so now, in order to get the text from them, should I use Ext.Container.getComponent('title').getValue ??

On doing that, Firebug gives me an error saying "Ext.Container.getComponent is not a function."

Condor
26 Jul 2010, 4:37 AM
Can you post your current code?

rishi89
26 Jul 2010, 4:41 AM
I replaced with 'itemId' for the text fields, so now, in order to get the text from them, should I use Ext.Container.getComponent('title').getValue ??

On doing that, Firebug gives me an error saying "Ext.Container.getComponent is not a function."


Here is my current code:


fileUpload:function(spaceHash, saveHandler, extraParams){
var win;
var fp;
Ext.apply(Ext.form.VTypes,{
AlphaNum: function(v) {
return /[a-z0-9\s]/i.test(v);
},
AlphaNumText: 'Must be an alphanumeric word',
AlphaNumMask: /[a-z0-9\s]/i
});
win = new Ext.Window({
id : Ext.id(),
title : 'File Upload Form',
renderTo : document.body,
layout : 'fit',
width : 600,
autoHeight : true,
closeAction : 'close',
items : fp = new Ext.FormPanel({
id : 'form-panel',
fileUpload : true,
width : 500,
autoHeight : true,
frame : true,
bodyStyle : 'padding: 10px 10px 0 10px;',
labelWidth : 50,
defaults :
{
anchor : '95%',
msgTarget : 'side'
},
items: [{
itemId: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
vtype: 'AlphaNum',
},{
xtype: 'textfield',
itemId: 'form-file',
fieldLabel: 'Browse',
inputType: 'file',
name: 'path',
}],
buttons: [{
text: 'Save',
name: 'Submit',
handler: function(w){
w.disable();
var uploadHash = spaceHash;
uploadHash['title']=Ext.Container.getComponent('title').getValue();
if(fp.getForm().isValid()){
Ext.Ajax.request({
form: fp.getForm().getEl().dom,
isUpload: true,
headers: {'Content-type':'multipart/form-data'},
scope: this,
url: CDN.baseUrl+'upload.php',
params:{
'file': Ext.getCmp('form-file').getValue(),
'hash': JSON.stringify(uploadHash)
},
method: 'post',
success: function(o){
console.log(o);
var res = eval('('+o.responseText+')');
CDN.msg('Success', 'The file is successfully uploaded.');
saveHandler(res, spaceHash, extraParams);
win.close(this);
},
failure: function(o){
CDN.msg('Failure', 'Cannot upload file.');
saveHandler(res, spaceHash, extraParams);
win.close(this);
}
});
}
}
}]
})
});
win.show(this);
},

Condor
26 Jul 2010, 4:47 AM
I still see an id in there (id:'form-panel') and you can't use Ext.getCmp on itemIds!

rishi89
26 Jul 2010, 9:26 PM
I still see an id in there (id:'form-panel') and you can't use Ext.getCmp on itemIds!

Well I want to thank you for your help Condor, while I hear around the office that the specs are going to change...