PDA

View Full Version : Grid in tab in window fails on second open



el_chief
4 Jan 2012, 8:07 PM
I have a grid, inside a tab, in a window (with a form).

It works great when i open it one time.

When I open it a second time, it screws up the whole UI, and is only partially displayed.

Any ideas before I post up the code?

ExtJS 4.1 beta in FF on Win 7

skirtle
4 Jan 2012, 8:15 PM
Well using a beta version is obviously asking for trouble but I suspect that isn't your problem.

Problems of this kind are almost always caused by the same thing: a reference to an object is shared between the windows and it is destroyed when the first window is closed.

Putting objects on the Ext.define config is a common way for this to happen. Make sure you only put configs on the Ext.define config, not fully instantiated objects. e.g.:


Ext.define(..., {
items: [
Ext.create(...) // bad
]
});


Ext.define(..., {
items: [
{xtype: ...} // good
]
});

Trace the lifecycles of your objects. All the children of a window will be destroyed when the window is destroyed. Do you have any components that aren't recreated by the second window?

A common way to avoid such problems is to hide a window rather than destroying it, though that doesn't necessary give equivalent behaviour. For example, you may want to reset the state within the window and simply hiding it won't do that.

slemmon
4 Jan 2012, 9:23 PM
Skirtle,
When instantiating a component I can do that with an xtype for components, but what is the best practice for instantiating non-widgets? Like if I had two comboboxes and a store and wanted each combo to have an instance of the same store. I know if I use the storeId in the combos store config and I filter the store instance for combo A it'll filter combo B as well. Wanting to avoid that.

skirtle
4 Jan 2012, 10:01 PM
Interesting question.

You're correct, sharing a store between comboboxes causes problems unless you have editable: false.

You can do something like this:


Ext.define('MyComboBox', {
extend: 'Ext.form.field.ComboBox',
store: {
fields: [...],
proxy: ...
},
...
});

Here the store is a store config and each combobox will end up with its own instance.

If you want to do the equivalent of an xtype with stores that it is also possible. Say, for example, we do this:


Ext.define('MyStore', {
alias: 'store.mystore',
extend: 'Ext.data.Store',
...
});

You can then do this:


Ext.define('MyComboBox', {
extend: 'Ext.form.field.ComboBox',
store: {type: 'mystore'},
...
});

Note how this differs from using a storeId. Whereas a storeId points to a pre-existing store, using a type creates a new store when the combobox is instantiated.

If you want to see where this magic happens look here:

http://docs.sencha.com/ext-js/4-0/source/AbstractStore.html#Ext-data-AbstractStore

Right at the top you'll see a static method called create that prepends the string 'store.' to the type then instantiates the store by alias.