PDA

View Full Version : Combobox not display values by second time



susan_morri
5 Mar 2010, 7:04 PM
Hi guys,
I have a form with a two comboboxes. When starts the first time, everything is ok, but when i try another time (second time) the combobox display nothing.
i am following the tutorial
http://nicolas.bize.free.fr/ext/tutorial/Tutorial%20Part%205/index.html

My code is:


var UsuarioDS;
var UsuarioCM;
var dgrUsuarios;
//Formulario Agregar
var frmAgregarUsuario;
var wndAgregarUsuario;
//
var txtautogenerado_usuario;
var txtnombre_usuario;
var txtclave_usuario;
var txtnombre_real;
var cmbautogenerado_rol;
var cmbestado_usuario;

//
var wndUsuarios;
Ext.onReady(function(){
Ext.QuickTips.init();
function guardarUsuario(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Espere un momento...',
url: 'usuario.php',
params:
{
tarea: "u",
ID: oGrid_event.record.data.ID,
Usuario: oGrid_event.record.data.Usuario,
Clave: oGrid_event.record.data.Clave,
Nombre: oGrid_event.record.data.Nombre,
Rol: oGrid_event.record.data.Rol,
Estado: oGrid_event.record.data.Estado
},
success: function(response)
{
var result=eval(response.responseText);
switch(result)
{
case 1:
UsuarioDS.commitChanges();
UsuarioDS.reload({params: {start: 0, limit: 15}});
break;
default:
Ext.MessageBox.alert('No se pudo grabar el usuario');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','No se pudo conectar con la base de datos');
}
});
}

function crearUsuario(){
if(ValidarUsuario())
{
Ext.Ajax.request({
waitMsg: 'Espere por favor...',
url: 'usuario.php',
params: {
tarea: "c",
nombre_usuario:txtnombre_usuario.getValue(),
clave_usuario:txtclave_usuario.getValue(),
nombre_real:txtnombre_real.getValue(),
autogenerado_rol:cmbautogenerado_rol.getValue(),
estado_usuario:cmbestado_usuario.getValue()
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.MessageBox.alert('OK','El usuario ha sido creado.');
UsuarioDS.reload({params: {start: 0, limit: 15}});
//RolesDS.reload();
wndAgregarUsuario.hide();
break;
default:
Ext.MessageBox.alert('Warning','Could not create the president.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
else
{
Ext.MessageBox.alert('Advertencia', 'El formulario contiene campos no validos!');
}
}

function limpiarfrmUsuario(){
txtnombre_usuario.setValue('');
txtclave_usuario.setValue('');
txtnombre_real.setValue('');
cmbestado_usuario.setValue('') ;
cmbautogenerado_rol.setValue('') ;
}

function ValidarUsuario(){
return(txtnombre_usuario.isValid() && txtclave_usuario.isValid() && txtnombre_real.isValid() && cmbestado_usuario.isValid());
}

// display or bring forth the form
function displayFormWindow(){
if(!wndAgregarUsuario.isVisible()){
limpiarfrmUsuario();
wndAgregarUsuario.show();
} else {
wndAgregarUsuario.toFront();
}
}

function confirmarEliminar(){
if(dgrUsuarios.selModel.getCount() == 1) //
{
Ext.MessageBox.confirm('Confirmar','¿Desea eliminar el usuario seleccionado?', eliminarUsuarios);
} else if(dgrUsuarios.selModel.getCount() > 1){
Ext.MessageBox.confirm('Confirmar','¿Desea eliminar los usuarios seleccionados?', eliminarUsuarios);
} else {
Ext.MessageBox.alert('Uh oh...','You can\'t really delete something you haven\'t selected huh?');
}
}

function eliminarUsuarios(btn){
if(btn=='yes'){
var selections = dgrUsuarios.selModel.getSelections();
var prez = [];
for(i = 0; i< dgrUsuarios.selModel.getCount(); i++)
{
prez.push(selections[i].json.autogenerado_usuario);
}
var encoded_array = Ext.encode(prez);
Ext.Ajax.request({
waitMsg: 'Please Wait',
url: 'usuario.php',
params: {
tarea: "d",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: // Success : simply reload
UsuarioDS.reload({params: {start: 0, limit: 15}});
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}



UsuarioDS = new Ext.data.Store({
id: 'UsuarioDS',
proxy: new Ext.data.HttpProxy({
url: 'usuario.php',
method: 'POST'
}),
baseParams:{tarea: "l"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader
(
{
root: 'results',
totalProperty: 'total',
id: 'id'
},
[

{name: 'ID', type: 'string', mapping: 'autogenerado_usuario'},
{name: 'Usuario', type: 'string', mapping: 'nombre_usuario'},
{name: 'Clave', type: 'string', mapping: 'clave_usuario'},
{name: 'Nombre', type: 'string', mapping: 'nombre_real'},
{name: 'Rol', type: 'string', mapping: 'autogenerado_rol'},
{name: 'Estado', type: 'string', mapping: 'estado_usuario'}
]
),
sortInfo:{field: 'ID', direction: "ASC"}
});

RolesDS = new Ext.data.Store({
id: 'RolesDS',
proxy: new Ext.data.HttpProxy({
url: 'usuario.php',
method: 'POST'
}),
baseParams:{tarea: "lr"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader
(
{
root: 'results',
totalProperty: 'total',
id: 'id'
},
[
{name: 'ID', type: 'string', mapping: 'autogenerado_rol'},
{name: 'Rol', type: 'string', mapping: 'nombre_rol'}
]
),
sortInfo:{field: 'ID', direction: "ASC"}
});

var xg = Ext.grid;
var sm = new xg.CheckboxSelectionModel();

UsuarioCM = new Ext.grid.ColumnModel(
[
new xg.RowNumberer(),
sm,
{
header: '#',
readOnly: true,
dataIndex: 'ID',
width: 50,
hidden: true
},
{
header: 'Usuario',
dataIndex: 'Usuario',
sortable: true,
width: 60,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},
{
header: 'Clave',
dataIndex: 'Clave',
hidden: true,
width: 60
},
{
header: 'Nombre',
readOnly: true,
dataIndex: 'Nombre',
sortable: true,
width: 180,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},
{
header: 'Rol',
dataIndex: 'Rol',
width: 80
},
{
header: 'Estado',
dataIndex: 'Estado',
sortable: true,
width: 110,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields:['AUT_STA', 'NOM_STA'],
data: [['H','HABILITADO'],['D','DESHABILITADO'],['V','VACACIONES'],['P','PENDIENTE']]
}),
mode: 'local',
displayField: 'NOM_STA',
valueField: 'AUT_STA',
listClass: 'x-combo-list-small'
})

}
]
);
UsuarioCM.defaultSortable= true;

dgrUsuarios = new Ext.grid.EditorGridPanel({
id: 'dgrUsuarios',
store: UsuarioDS,
cm: UsuarioCM,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [{
text: 'Nuevo',
tooltip: 'Registra un nuevo usuario',
iconCls:'add', // this is defined in our styles.css
handler: displayFormWindow
},
'-',
{ // Added in Tutorial 6
text: 'Eliminar',
tooltip: 'Elimina a los usuarios seleccionados',
handler: confirmarEliminar, // Confirm before deleting
iconCls:'remove'
},
'-',
new Ext.app.SearchField({
store: UsuarioDS,
params: {start: 0, limit: 15},
width: 120
})
],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: UsuarioDS,
displayInfo: true
})
});

wndUsuarios = new Ext.Window({
id: 'wndUsuarios',
title: 'Usuarios Registrados',
closable:true,
width:700,
height:350,
plain:true,
layout: 'fit',
items: dgrUsuarios
});

UsuarioDS.load({params: {start: 0, limit: 15}});
RolesDS.load();
wndUsuarios.show();
dgrUsuarios.on('afteredit', guardarUsuario);

txtnombre_usuario = new Ext.form.TextField({
id: 'txtnombre_usuario',
fieldLabel: 'Usuario',
maxLength: 8,
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

txtclave_usuario = new Ext.form.TextField({
id: 'txtclave_usuario',
inputType:'password',
fieldLabel: 'Clave',
maxLength: 8,
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

txtnombre_real = new Ext.form.TextField({
id: 'txtnombre_real',
fieldLabel: 'Nombre Completo',
maxLength: 60,
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

cmbautogenerado_rol = new Ext.form.ComboBox({
id: 'cmbautogenerado_rol',
fieldLabel: 'Rol',
anchor : '95%',
store: RolesDS,
mode: 'local',
displayField: 'Rol',
valueField: 'ID',
allowBlank: false,
triggerAction: 'all'
});

cmbestado_usuario = new Ext.form.ComboBox({
id:'cmbestado_usuario',
fieldLabel: 'Estado',
store:new Ext.data.SimpleStore({
fields:['AUT_STA', 'NOM_STA'],
data: [['H','HABILITADO'],['D','DESHABILITADO'],['V','VACACIONES'],['P','PENDIENTE']]
}),
mode: 'local',
displayField: 'NOM_STA',
valueField: 'AUT_STA',
allowBlank: false,
anchor:'95%',
triggerAction: 'all'
});
//
frmAgregarUsuario = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle:'padding:5px',
width: 200,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:1,
layout: 'form',
border:false,
items: [txtnombre_usuario, txtclave_usuario, txtnombre_real,cmbautogenerado_rol, cmbestado_usuario]
}]
}],
buttons: [{
text: 'Grabar',
handler: crearUsuario
},{
text: 'Cancelar',
handler: function(){
// because of the global vars, we can only instantiate one window... so let's just hide it.
wndAgregarUsuario.hide();
}
}]
});

wndAgregarUsuario= new Ext.Window({
id: 'PresidentCreateWindow',
title: 'Crear Nuevo Usuario',
closable:true,
width: 200,
height: 350,
plain:true,
layout: 'fit',
items: frmAgregarUsuario
});

});
Thanks for any help.

susan_morri
6 Mar 2010, 1:14 PM
today i am doing some test and can see the problem : overlap
http://www.quieroundemo.com/wp-content/uploads/2010/03/Captura.JPG

I believe that problem is in CSS, someone have the same problem?
An solution?

ZeusTheTrueGod
6 Mar 2010, 10:14 PM
You have a few chances to get an answer here.

1st. Make a more simple example: panel, form with only one field - combobox, remove non english words.
2nd. If possible - remove any ajax calls. after that publish the code somethere (there are a lot of hostings where simple html pages can be published, may be google sites)
that is accessible to everyone and the error is reproducable.
3nd Tell us about your browser

Hint: read your post and try to reproduce something on virtual machine without your project. Can't do it simple - don't expect that someone will do it simple too.

susan_morri
7 Mar 2010, 3:50 PM
The problem is Z-Index , the second time when the window is showed, window z-index is greater than z-index of combobox.
If someone have the same problem, please let me know.
In this tutorial(http://nicolas.bize.free.fr/ext/tutorial/Tutorial%20Part%205/index.html) Ext is using version 2. I use version 3.
I am testing in Mozilla FF 3.6

susan_morri
12 Mar 2010, 4:12 PM
The problem have solution, but in 3.1.2 (subscriber only)
http://www.extjs.com/forum/showthread.php?t=94095&highlight=modal+window

Nytrm
13 Mar 2010, 12:05 PM
You mean the first time it does show the combobox options and when u trigger an event and hide then window and then reopen the window it does not show the iem list anymore?

i am having the same problem.

if it is fixed in 3.1.2 how can we fix it in 3.1.1 ?

JoelAlejandro
25 Mar 2010, 3:21 PM
A lame yet effective solution: On the initList function of the ComboBox class, force zindex to an arbitrary value.

sumairirshad
19 Jun 2013, 2:34 AM
can you show me a sample code?