PDA

View Full Version : Error when I enable/disable buttons.



gabvalentin
7 Jul 2012, 3:02 AM
Hi,

I have a window which I open and close many times. The window has a grid panel (which name is "GridMensaje") with a toolbar and the toolbar is bottom docked. The toolbar has several buttons and by default most of them are disabled. These buttons will be enabled when I add rows to the grid.
To enable/disable the buttons I register events such as "add", "remove","clear","update" for the store grid and also "select" event for the grid. When an event is fire, a method will be called and the only thing that it does is disable o enable the buttons through the setDisabled method.

The problem is that when I open the window for the second time I get the below error:

36924

The error happens into the below method and the "clear" event is fired when I do myStoreGrid.removeAll()


mygrid.getStore().on('clear',function(){

myButton.setDisabled(true);
});


With ExtJS 4.0.7 the error does not occur. It's occurring with 4.1 and 4.1.1

I use the last version of FireFox.

Also I paste the code of my grid which is used by a window as a component:


Ext.define('IVR.view.designer.GridMensaje', {
extend: 'Ext.grid.Panel',
alias : 'widget.gridmensaje',
margin: '2 0 4 0',
title: lang_titulo_grid_mensaje_locucion,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
forceFit: true,
scroll: 'vertical',
sortableColumns: false,
flex: 1,
store: Ext.create('IVR.store.SegmentosLocucion'),
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: lang_msg_arrastrar_textos_grid_mensaje
}
},
initComponent: function() {
var me = this;

Ext.applyIf(me, {
columns: [{
xtype: 'gridcolumn',
width: 16,
dataIndex: 'nombre_tipo',
text: lang_columna_tipo_texto_grid_mensaje
},{
xtype: 'gridcolumn',
dataIndex: 'locucion',
text: lang_columna_texto_grid_mensaje,
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
defaults: {
disabled: true
},
items: [
{
xtype: 'button',
text: lang_boton_add_grid_mensaje,
disabled: false,
iconCls: 'add-2-icon',
action: 'add'
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: lang_boton_editar_grid_mensaje,
iconCls: 'editar-icon',
action: 'editar'
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: lang_boton_eliminar_grid_mensaje,
iconCls: 'quitar-icon',
action: 'eliminar'
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: lang_boton_eliminar_todo_grid_mensaje,
iconCls: 'quitar-todo-icon',
action: 'eliminarTodo',
disabled: false
},{
xtype: 'tbfill',
style: 'height:100%'
},{
xtype: 'button',
text: lang_boton_reproducir_grid_mensaje,
iconCls: 'play-icon',
action: 'reproducir'
}]
}
]
});

me.callParent(arguments);
}
});

Thanks,
Valentin

scottmartin
7 Jul 2012, 8:54 AM
You will need to provide more information for us to provide help in this issue. You are referencing mybutton in your call, but did not provide the code on how your window is created and called or where this button is ...

A small working example would be helpful.

Regards,
Scott.

gabvalentin
7 Jul 2012, 11:01 AM
Ok,

Here is the code of my window:


Ext.define('IVR.view.designer.ConfiguracionAudio', {
extend: 'Ext.window.Window',

height: 510,
width: 542,
layout: {
align: 'stretch',
padding: 4,
type: 'vbox'
},
title: lang_titulo_ventana_configurar_objeto_mensaje,
closable: false,
modal: true,
resizable: false,
buttons: [{
text: lang_boton_guardar_ventana_configurar_objeto_mensaje,
action: 'guardar',
iconCls: 'save-icon'
},{
text: lang_boton_cerrar_ventana_configurar_objeto_mensaje,
action: 'cancelar',
iconCls: 'cancel-icon'
}],
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'form',
border: '0px',
height: 80,
width: 400,
layout: {
type: 'auto'
},
bodyPadding: 5,
items: [{
xtype: 'textfield',
width: 390,
fieldLabel: lang_etiqueta_objeto_designer,
labelWidth: 140
},{
xtype: 'checkboxfield',
checked: true,
fieldLabel: lang_etiqueta_interrumir_mensaje_ventana_configurar_objeto_mensaje,
labelWidth: 140
}
]
},
{
xtype: 'gridmensaje'
},{
xtype: 'previsualizarmensaje'
}],
tools: [{
xtype: 'tool',
type: 'help'
}]
});

me.callParent(arguments);
}
});


As you can see, the window use the grid as a component. Also the window use another component which name is "previsualizarmensaje" and the code of it is:


Ext.define('IVR.view.designer.PanelPrevisualizarMensaje', {
extend: 'Ext.panel.Panel',
appel: 'previsualizarmensaje',
alias : 'widget.previsualizarmensaje',
height: 160,
style: 'background-color:#F7F3DE',
bodyPadding: '2 2 2 5',
title: lang_titulo_panel_vista_previa_mensaje,
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});

The window is rendered ok but after that when I do "myStoreGrid.removeAll()" I get that error.

The code "myStoreGrid.removeAll()" and the listeners are located in my controller. In that controller I have a function which is called when I click on a button and in that moment the window is rendered. I paste some of the code:


editarAudio: function(objetoSeleccionado){
var me = this;

var ventana = new Ext.create('IVR.view.designer.ConfiguracionAudio');
var gridMensaje = ventana.down('gridpanel');
var gridStore = gridMensaje.getStore();

var btnGuardar = ventana.down('button[action=guardar]');
var btnCancelar = ventana.down('button[action=cancelar]');

var btnNuevo = gridMensaje.down('button[action=add]');
var btnEditar = gridMensaje.down('button[action=editar]');
var btnEliminar = gridMensaje.down('button[action=eliminar]');
var btnEliminarTodo = gridMensaje.down('button[action=eliminarTodo]');
var btnReproducir = gridMensaje.down('button[action=reproducir]');

-------------------------------------------------------------------

gridMensaje.getStore().on('add',function(){
btnReproducir.setDisabled(false);
});

gridMensaje.getStore().on('remove',function(store){
if (store.getCount() == 0){
btnReproducir.setDisabled(true);
}
});

gridMensaje.getStore().on('clear',function(){
btnReproducir.setDisabled(true);
});

gridMensaje.on('select',function(rowModel, record){
if (record.get('tipo') == 'variable'){
btnEditar.setDisabled(true);
}
});

ventana.show();

gridStore.removeAll();

}

gabvalentin
9 Jul 2012, 9:56 AM
Has anyone been able to simulate the error?

gabvalentin
9 Jul 2012, 10:10 AM
Adding console.debug(gridMensaje) inside of

gridMensaje.getStore().on('clear',function(){
console.debug(gridMensaje);
btnReproducir.setDisabled(true);
});

I saw that the first time when I open the window the "clear" event is fired only one time but if I close the window and then I open it again that event is fired two times and I see 2 grids with different ids so I think that the problem is that when I make window.close() to close the window, the grid is not deleted.

gabvalentin
14 Jul 2012, 12:06 PM
Can anyone help me, please?

scottmartin
14 Jul 2012, 2:45 PM
I see the following:



var ventana = new Ext.create('IVR.view.designer.ConfiguracionAudio');
ventana.show();


Where are you closing this window?
How are you closing?
Where is the event?
Have you check the value of ventana after you close? is there still an instance?

You say when you create the window again, there is a 2nd instance of the grid in the window?
I see you are creating the grid when you create a new instance.

If this is a heavy usage window, why not hide the window instead of close?

Scott.