I have a checkbox that triggers a function that opens a small window with a grid and a form.
If closeAction:'close' the window is not reopened after closing (some error).
If closeAction:'hide' the window is reopened with a mess instead of its items.
I know that I can solve the problem by id:Ext.id() though I have other functions that are using the id's.
Is there a way to reopen the window without these problems?
Part of the function creating the window, nothing unusual:
var errWindow = new Ext.Window({
width:300,
title:headerStr,
closeAction:'hide',
items: [errForm,problemsGrid]
});
errWindow.show();
The items of the form have id's like: "textfieldNumber1". Without the id's everithing works fine, but with them I get this
If you use closeAction: 'close' which is the default, then the window cannot be reopened with show(). If you use use closeAction: 'hide' then the window can be shown and hidden but you must do this with hide() and show() calls. A call to close() will destroy the window regardless of what closeAction is set to.
Is it that you want to destroy your form when user clicks on close, while keeping window hidden for re-use?
if so,
Listen to beforeClose event, and remove form from window's items
Call windows.hide()
Also, you need to add new form (since you destroyed it), while showing window again. listen to beforeShow to do that.
I had the same problem . As "Narenda Kamma" already mentioned before need to listen to beforeClose and then call to destroy function . See example below
var me = this
this.window.on("beforeclose",
function (com, eOpts) { me.closeWindow() });
Related
I have a main window with a custom Ext.panel.Panel using ExtJS 5.0.1.
Clicking an item shown on the custom panel creates and shows a custom Ext.window.Window for editing said item.
For the purpose of getting some kind of answer, or a starting point for my own situation, I'll ask for standard Ext components.
On closing the custom window, a variable in the custom panel needs to be updated to show that changes have been made.
This is a different requirement to a confirmation message before closing the window; the window does not control saving of information to a DB, but needs to let another component know that changes have been made.
This should be as simple as setting a boolean unsavedChanges to true on the panel if the window's information has been altered; I've performed this on a simpler page, which did not have the additional window as an obstacle.
Due to the use of the window, my typical go-to methods of calculating a variable as use of this.up or this.lookupReference returns null, or throw an error.
I'm aware that I can consider going to the parent of the page, then try and work down, but I'm not experienced enough to consolidate standard javaScript with the up and down capabilities of ExtJS, or at least understand the intricacies of ExtJS to navigate past the "item window" back to the panel.
How would I be able to refer to the panel while closing the window in order to update the panel's data?
Well, there's a couple of ways.
First, you can pass in your panel, or a callback function, during the construction of the window. e.g.:
// in panel
var window = Ext.create('MyWindow', { callingPanel: this })
...
// in window
onClose: function() { this.callingPanel.doStuff(); }
The other way to be to register a listener to the 'close' event of the window.
// in panel
var window = Ext.create('MyWindow', {
listeners: {
scope: this,
close: this.doStuff
}
})
The listener approach tends to work best when you don't want to tightly couple the window to the calling panel.
I have a class called SettingsBar that extends TitleBar in Sencha Touch 2.3. This SettingsBar I'm using has several buttons on it. When you click the Settings button then the bar is added to the panel and it shows up just fine.
You can click the buttons on the SettingsBar and different things will happen in the app. I have it setup so that you can make the SettingsBar disappear if you click the Settings button again. So the Settings button adds and removes the SettingsBar.
When the SettingsBar is added, and you click some of the buttons, then the SettingsBar is removed, the state of the SettingsBar isn't saved. The buttons go back to their original text (their text changes when you click them) and the event handling for them no longer works. You just click them and nothing happens.
Here's my code that adds and removes the SettingsBar:
settingsTap: function(){
if(settingsToolbar.added){
Ext.getCmp('mainview').removeAt(2);
console.log('added: '+settingsToolbar.added);
}else{
Ext.getCmp('mainview').add(settingsToolbar);
console.log('added: '+settingsToolbar.added);
}
settingsToolbar.added = !settingsToolbar.added;
}
The event handling is being done in my controller. Why would the buttons be reset and event handling on them removed when the SettingsBar is removed from the panel?
This is troublesome and has been asked for several times.
The safest way which even works when you destroy the component completely when removing it (you should always do, it reclaims a lot of memory), is to declare the event handlers in the initialize function of that component, or its parent component, wherever you think suitable, for example:
initialize: function(){
var me = this;
me.add({
xtype: 'list',
grouped: true,
indexBar: true,
itemTpl: '{first} {last}',
listeners: [
{
event: 'itemtap',
fn: function(dataview, index, target, record, e){
// do something
}
}
]
});
}
This is an example for itemtap event on a Ext.List. Let's adapt it to your case.
By default, child components are destroyed when they are removed from a container. When speaking of Ext components, "destroy" means removing all listeners and references, so that the object can be cleaned out by the garbage collector.
You can prevent destruction of removed components by changing the autoDestroy option of the container (the title bar, in your case). Don't forget however that you'll have to call the destroy method of each components yourself when you're done with them, or you'll be creating a memory leak in your app.
I create an object of window, and put tabpanel in this window. but window.close() method does not destroy window. When I click button to open window again it display 2 different tabpanel, one from old window and another from new window and it crash my user interface.
I also called listener "beforeclose" and in this method destroy tabpanel but that doest not work.
What can be done?
Are you sure that closeAction option is set to destroy?
Of course it is a good idea to show simplified sources, so we can understand where the problem exists.
Add closeAction:'destroy' to your window. It should work.
In method that is working in the background, i have two important lines :
createPopup();
MessageBox.Show(sth);
more lines
more lines
createPopup() just creates a popup, adds a grid as a child and shows popup.
My question is, why first shows up messageBox, then shows up Popup, which appears after all lines in this method done ? How could I make this popup to show before all lines in this method will be done ?
All the UI changes are normally queued up and will be shown at once on the screen.
And this does not include MessageBox. So it shows up immediately and prevents the execution, until user clicks on Ok. Hence eventhough your popUP is first executed, it will be shown in the UI only after the MessageBox.
For your problem, Try placing your MessageBox.Show(something) in a separate thread.
createPopup();
Dispatcher.BeginInvoke(() =>
{
MessageBox.Show("some message");
});
more lines
more lines
Give it a try. I am not sure whether it solves your problem or not as I dnt know the code in createPopUp() method.
Creating the pop-up, does not actually draw it on the screen until the Layout event. If you want to ensure that the pop-up has been drawn before you display the pop-up, attach an event handler to the pop-up's LayoutUpdated event and display the message box from within that event handler. Be sure to detach the event handler as well or you will see multiple message boxes.
public InitPage()
{
Popup popup = new Popup();
popup.LayoutUpdated += popup_LayoutUpdated;
LayoutRoot.Controls.Add(popup);
}
void popup_LayoutUpdated(object sender, object e)
{
popup_LayoutUpdated -= popup_LayoutUpdated;
MessageBox.Show("hello");
}
i am using a factory function (which has grids within windows called using button handler)within one form.
so when i click the button and open a grid and than close it,it works correctly,
but say for example in a situation:
if i open both grids and close , and than try to open other grid the previous grids contents are loaded,but as i have set the store to load in button handler that particular store is loading correctly(i have checked with fire bug) but contents of grid are not changing
win.hide();//use to hide the window after using it
closeAction: 'hide',//in window config
I am assuming that you are using gridpanels for each of these grids. You could force the stores to reload(). Or on the Window's close or hide event, you could try and clear the data on the store or reset the gridpanel.
You may want to read up on the closeAction property on the Window object. That lets you define the behavior of the close button on the window.