PDA

View Full Version : Correct destroy combobox in ExtJS 4.0.2a



env0ke
23 Aug 2011, 10:07 PM
Hi all,

I use combobox with rest store in my form. When i create window with form (and combobox) and sumbit - it work. Next i destroy window with destroy(). But when i create new window with this form (and combobox) i see error "Ext.fly( ... RemoveCls....". How i can correct destroy (delete selection?) my combobox? :-?

skirtle
23 Aug 2011, 10:23 PM
Are you saying that you're trying to reuse the form and combobox but they're destroyed?

Firstly, consider hiding the window rather than destroying it. If you're keeping the form and combobox then why not the window?

Secondly, why are you reusing the form and combobox? Why not just recreate them each time you create a new window?

If you really do want to destroy the window but keep the form and combobox then you should remove them from the window before you destroy it using the remove() method. Be sure to pass false as the second argument to remove() to avoid them being destroyed.

env0ke
23 Aug 2011, 11:54 PM
@skirtle
(http://www.sencha.com/forum/member.php?197255-skirtle)
Thanks for your answer. I am creating a window within which the form and combobox. When the form sends data in response to success depends on the action of removing the window (with form and combobox?) - through the function destroy (). If I immediately try tore-create the same window with the same form and combobox, when i open the combobox list getting error RemoveCls. I would just remove the window, form and combobox and re-create them, and do not use the hide ().

Sorry of my english, use google translate.

skirtle
24 Aug 2011, 2:27 AM
I'm struggling a little to understand what you're saying. Is the problem solved now or not? If it is could you please mark the thread as Answered? If not, could you please rephrase the question?

env0ke
24 Aug 2011, 3:07 AM
Problem not solved. Full text of error:


Ext.fly(node).removeCls(this.selectedItemCls);

skirtle
24 Aug 2011, 3:41 AM
OK, I think I've managed to reproduce the problem.

Could you post the code for the store of your combobox?

env0ke
24 Aug 2011, 4:01 AM
Ok. I publish code of model and store:

Ext.define('FPS.model.Source', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int'},
{ name: 'name', type: 'string'}
]
});


Ext.define('FPS.store.Sources', {
extend: 'Ext.data.Store',
model: 'FPS.model.Source',
autoLoad: false,
proxy: {
type: 'rest',
url: '/api/sources',
reader: {
type: 'json'
}
}
});
And this my window with form:

Ext.define('FPS.view.subscribers.New', {
extend: 'Ext.window.Window',
alias: 'widget.NewSubscriberWindow',
requires: ['Ext.form.Panel'],
title: 'New subscriber',
iconCls: 'address-book-plus-icon',
closable: true,
closeAction: 'destroy',
modal: true,
resizable: false,
width: 380,
height: 280,
border: true,
layout: 'fit',
initComponent: function() {
var me = this;
var config = {
items: [ {
xtype: 'form',
url: '/subscribers/new/',
bodyStyle: {
background: '#dee7f7'
},
border: false,
bodyPadding: 10,
layout: 'anchor',
autoScroll: false,
defaults: {
xtype: 'textfield',
anchor: '100%',
labelWidth: 100
},
items: [{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Source',
name: 'source',
allowBlank: false,
xtype: 'combobox',
store: 'Sources',
editable: false,
displayField: 'name',
valueField: 'id',
emptyText: 'Select source...',
},{
xtype: 'textarea',
name: 'user_comment',
fieldLabel: 'Комментарий',
height: 80,
allowBlank: true
}],
buttons: [{
text: 'Cancel',
iconCls: 'cross-icon',
handler: function() {
me.destroy();
}
},{
text: 'Save',
formBind: true,
disabled: true,
iconCls: 'tick-icon',
handler: function() {
this.up('form').submit({
method: 'post',
success: function() {
me.destroy();
Ext.Msg.show({
title: 'Success',
msg: 'Информация успешно сохранена в базу данных.', buttons: Ext.Msg.OK,
icon: 'success-icon-window'
});
},
failure: function() {
Ext.Msg.show({
title: 'Failure',
msg: 'Во время сохранения данных произошла ошибка, попробуйте заново.<br>При повторении ошибки обратитесь к администратору системы.',
buttons: Ext.Msg.OK,
icon: 'failure-icon-window'
});
}
})
}
}]
}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config)); this.superclass.initComponent.apply(this, arguments); }});

skirtle
24 Aug 2011, 4:26 AM
I've got a much shorter test case. Still digging to figure out what's going wrong but in case anyone else is interested:


var store = new Ext.data.Store({
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'data/store.json',
reader: {
type: 'json'
}
}
});

new Ext.button.Button({
renderTo: Ext.getBody(),
text: 'Click',
handler: function() {
new Ext.window.Window({
height: 280,
width: 380,
items: {
displayField: 'name',
store: store,
valueField: 'id',
xtype: 'combobox'
}
}).show();
}
});

It only happens with remote data. To reproduce you just need to select a value in the combobox, close the window, then try to select another value in the combobox. Seems there's something about sharing a store that's causing a problem but so far I haven't managed to put my finger on it.

skirtle
24 Aug 2011, 4:47 AM
Got it.

There's a bug in combobox. The following override fixes it:


Ext.override(Ext.form.field.ComboBox, {
onDestroy: function() {
this.bindStore(null);

this.callParent();
}
});

I think there's a bug report for it here:

http://www.sencha.com/forum/showthread.php?136583

If you can confirm that my fix works I'll post it on that thread.

env0ke
24 Aug 2011, 5:15 AM
Awesome! It worked. Thank you!