PDA

View Full Version : Window wrong position



gabvalentin
8 Jul 2012, 1:19 AM
Hi,

I have a window that when I open it, it's placed in the left corner of my screen. I use ExtJS 4.1.1.

The code of the window is:


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

height: 225,
width: 542,
layout: {
type: 'fit'
},
title: lang_titulo_ventana_configurar_objeto_mensaje_y_recoger_datos,
closable: false,
modal: true,
resizable: false,
buttons: [{
text: lang_boton_guardar_ventana_configurar_objeto_mensaje_y_recoger_datos,
action: 'guardar',
iconCls: 'save-icon'
},{
text: lang_boton_cerrar_ventana_configurar_objeto_mensaje_y_recoger_datos,
action: 'cancelar',
iconCls: 'cancel-icon'
}],
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
border: 0,
height: 100,
activeTab: 0,
tabPosition: 'bottom',
items: [
{
xtype: 'form',
border: '0px',
bodyStyle: 'border:0px;',
layout: {
type: 'auto'
},
bodyPadding: 10,
title: lang_titulo_tab_propiedades_ventana_configurar_objeto_mensaje_y_recoger_datos,
appel: 'propiedades',
items: [{
xtype: 'textfield',
width: 350,
fieldLabel: lang_etiqueta_objeto_designer,
name: 'etiqueta',
appel: 'etiqueta',
labelWidth: 150
},{
xtype: 'checkboxfield',
fieldLabel: lang_etiqueta_interrumir_mensaje_ventana_configurar_objeto_mensaje_y_recoger_datos,
name: 'interrumpir_audio',
appel: 'interrumpir_audio',
labelWidth: 150
},{
xtype: 'container',
layout: {
align: 'middle',
type: 'hbox'
},
items: [{
xtype: 'radiogroup',
saveBuffer: 120,
layout: {
type: 'column'
},
fieldLabel: lang_etiqueta_recoger_digitos_ventana_configurar_objeto_mensaje_y_recoger_datos,
labelWidth: 150,
items: [{
xtype: 'radiofield',
boxLabel: lang_etiqueta_digito_almohadilla_ventana_configurar_objeto_mensaje_y_recoger_datos,
checked: true,
name: 'hasta',
inputValue: 'digito',
appel: 'hasta_digito'
},{
xtype: 'radiofield',
margin: '0 5 0 15',
boxLabel: lang_etiqueta_longitud_digitos_ventana_configurar_objeto_mensaje_y_recoger_datos,
name: 'hasta',
inputValue: 'longitud',
appel: 'hasta_longitud'
}]
},{
xtype: 'numberfield',
minValue: 1,
maxValue: 50,
name: 'longitud',
appel: 'longitud',
width: 50
}
]
},{
xtype: 'numberfield',
minValue: 10,
maxValue: 30,
width: 210,
fieldLabel: lang_etiqueta_timeout_ventana_configurar_objeto_mensaje_y_recoger_datos,
name: 'timeout',
appel: 'timeout',
labelWidth: 150,
anchor: '100%'
}
]
},{
xtype: 'panel',
border: 0,
layout: {
align: 'stretch',
padding: 5,
type: 'vbox'
},
bodyStyle: 'border:0px; background-color:#DAE6F3',
title: lang_titulo_tab_mensaje_ventana_configurar_objeto_mensaje_y_recoger_datos,
appel: 'mensaje',
items: [{
xtype: 'gridmensaje'
},{
xtype: 'previsualizarmensaje'
}]
}
]
}
],
tools: [{
xtype: 'tool',
type: 'help'
}]
});

me.callParent(arguments);
}
});

With ExtJS 4.0.7 this does not happen.

To open it, I do in my controller this:


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

I attached a screenshot:

36932

Also I can't move the window.
The window was designed with Sencha Architect 2 and then I modified some properties.

Thanks,
Valentin

gabvalentin
8 Jul 2012, 1:48 AM
I've started to comment part of code and I've seen that the problem is with the below code:


{
xtype: 'container',
layout: {
align: 'middle',
type: 'hbox'
},
items: [{
xtype: 'radiogroup',
saveBuffer: 120,
layout: {
type: 'column'
},
fieldLabel: lang_etiqueta_recoger_digitos_ventana_configurar_objeto_mensaje_y_recoger_datos,
labelWidth: 150,
items: [{
xtype: 'radiofield',
boxLabel: lang_etiqueta_digito_almohadilla_ventana_configurar_objeto_mensaje_y_recoger_datos,
checked: true,
name: 'hasta',
inputValue: 'digito',
appel: 'hasta_digito'
},{
xtype: 'radiofield',
margin: '0 5 0 15',
boxLabel: lang_etiqueta_longitud_digitos_ventana_configurar_objeto_mensaje_y_recoger_datos,
name: 'hasta',
inputValue: 'longitud',
appel: 'hasta_longitud'
}]
},{
xtype: 'numberfield',
minValue: 1,
maxValue: 50,
name: 'longitud',
appel: 'longitud',
width: 50
}
]
}

When I comment that part everything is ok. I don't know what is wrong with that code.

gabvalentin
8 Jul 2012, 3:25 AM
I think that the problem is when I set hbox layout to a container. I mean:


xtype: 'container',
layout: {
align: 'middle',
type: 'hbox'
}

Could be that a bug?

I saw that everywhere in my application where I have a container with a hbox layout , the window is placed in the left corner and also break their items.

skirtle
8 Jul 2012, 3:42 AM
I suspect the layout is failing. Are you seeing any log messages to confirm this? If you're not seeing any log messages make sure you're using either ext-all-dev.js or dynamic loading of the library.

You could also try using the page analyser to check the layouts. That'll give you more information about what's failing.

gabvalentin
8 Jul 2012, 4:17 AM
I used ext-all-debug and now I changed it by ext-all-dev and then I set

Ext.Loader.setConfig({
enabled:true
});

to enable dynamic loading.

Is that correct?

But now when I tried to load my page I get the error:






msg

"The specified callback function is undefined"



sourceClass

"Ext.Base"



sourceMethod

"addListener"

skirtle
8 Jul 2012, 4:27 AM
Just switch from ext-all-debug.js to ext-all-dev.js. Don't turn on dynamic loading if you weren't using it before.

ext-all-dev.js contains lots of really useful sanity checks that will log warnings or errors if you've got configuration problems. If you're currently using ext-all-debug.js for your application development I'd highly recommend switching.

If you still see that error message it'll be because one of the extra checks is catching a mistake in your code. You'll need to hunt that down before you do anything else.

gabvalentin
8 Jul 2012, 6:07 AM
I can't make it work. I get the same error. My page stop while it's loading the dependencies because I get "uncaught exception: Ext.Base.addListener(): The specified callback function is undefined".

gabvalentin
8 Jul 2012, 6:23 AM
Finally I could load the page with ext-dev-all.js and when I open the window with container component with layout hbox I get the message "Layout run failed".

skirtle
8 Jul 2012, 7:20 AM
The problem is the radiogroup, column layout doesn't work properly with shrink-wrap sizing yet. I'm surprised this worked against 4.0.7, you're doing all sorts of things that weren't supported in 4.0.7.

The simplest fix is to change your column layout to an hbox.

Alternatively you could specify either a width or a flex on the radiogroup.

gabvalentin
8 Jul 2012, 10:42 AM
Ok, it works.

Thank you guys for your help. Its good to know where is the problem to avoid it.

Thanks,
Valentin.

ankgkp
15 Jan 2013, 11:01 AM
@gabvalentin: I'm running into the same problem. How did you resolve that issue with ext-all-dev.js?
"uncaught exception: Ext.Base.addListener(): The specified callback function is undefined".

Thank you!

Kerry