PDA

View Full Version : Problem with Ext.Window : It is not loading window Items while opeing second time



funnyfox
8 May 2013, 7:27 AM
I wanted to add a window on my Ext JS Page. A page from where user can upload csv file to the application. I have a problem with the Ext.Window.
I have added a Button which when clicked will invoke Ext.Window.
The Window is loading and closing correctly for the first time. When I click on Button second time the Window is loading but the Items are not loading. I see an empty window and when I close the window it is not closing. I don't see any error on my console also.

Here is the code.



Ext.define('tz.ui.mySearchPanel', {
extend: 'Ext.form.Panel',
bodyPadding: 10,
title: '',
frame:true,
anchor:'100%',

initComponent: function() {
var me = this;
me.dockedItems = [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Import Statement',
scope: this,
handler: function(){
this.importStatementWindow();
}
}]
}];

me.myFileButton = Ext.create('Ext.form.field.File', {
buttonOnly: true,
hideLabel: true,
listeners: {
'change': function(button, value){
alert('Selected: '+ value);
}
}
});

me.employerCombo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Employer',
store: ds.employerStore,
labelAlign: 'left',
queryMode: 'local',
displayField: 'value',
valueField: 'name',
name : 'employer',
labelWidth :105
});
}

importStatementWindow:function ()
{
var win = new Ext.Window({
id:'xform-win-addAddress',
applyTo : 'hello-win',
layout : 'fit',
width : 500,
height : 300,
shim:false,
animCollapse:false,
constrainHeader:true,
closeAction:'hide',
modal:true,
items: [{
xtype : 'container',
items :[this.employerCombo,
this.myFileButton
]
}],
buttons: [{
text : 'Submit',
}]
});
win.show(this);
}
});

slemmon
10 May 2013, 10:39 AM
You're creating an instance of the components used by your window inside init component and the window uses that instance when it's first created. But, when you close a window by default it and its child components are destroyed. So, when you create the window the second time it's trying to add child components by instance that were just destroyed last time the window was closed.

So, you've got several options.
When you create the window you can set its closeAction: 'hide' which will hide instead of destroy the window and its child components. If you go that route then you should have your importStatementWindow method look to see if the window exists and if so then show it and if not then create > show it.

Or, if you want it to destroy itself on close (which may be a good way to reclaim resources within the browser) you can use the config of the child items right in the window's create config.



items: [{
xtype: 'filefield',
buttonOnly: true,
hideLabel: true,
listeners: {
'change': function(button, value){
alert('Selected: '+ value);
}
}
}, {
xtype: 'combo',
fieldLabel: 'Employer',
store: ds.employerStore,
labelAlign: 'left',
queryMode: 'local',
displayField: 'value',
valueField: 'name',
name : 'employer',
labelWidth :105
}]

funnyfox
11 May 2013, 9:46 AM
I used your approach and used Destroying of the window each time it is closed.