Combo ExtJS
Buenas tardes a tod@s!!!
Estoy empezando con ExtJS (grid) y me encuentro con el siguiente problema, al cargar los datos en lugar de mostrarme el displayField, me muestra el valueField. Seguramente esté haciendo algo mal, pero al ser nueva no veo cómo arreglarlo, les dejo mi código.
Ext.ns("com.quizzpot.tutorials"); com.quizzpot.tutorials.Crud = { init : function() { //CRUD var proxy = new Ext.data.HttpProxy({ api: { read : "serverside/getContacts.php", create : "serverside/createContact.php", update: "serverside/updateContact.php", destroy: "serverside/destroyContact.php" } }); var rd_random_employee_data = new Ext.data.JsonReader({}, ['idprovincia', 'descprovincia']); var provincias = new Ext.data.Store({ reader: new Ext.data.JsonReader({ fields: ['idprovincia', 'descprovincia'], root: 'rows'}), proxy: new Ext.data.HttpProxy({ url: 'serverside/getProvincias.php' }), autoload:true }); var provin = new Ext.form.ComboBox({ id: 'idprovincia', store: provincias, valueField: 'idprovincia', displayField: 'descprovincia', mode: 'remote', minChars : 0 , autoload:true }); var reader = new Ext.data.JsonReader({ totalProperty: 'total', successProperty: 'success',//<--- el successproperty indica la propiedad que define si se ha insertado/actualizado o borrado con éxito messageProperty: 'message', idProperty: 'coddelegacion', root: 'data'//<--- este es el nombre del parámetro que llega al servidor con el JSON modificado },[ {name: 'descdelegacion', allowBlank: false}, {name: 'domiciliodelegacion', allowBlank: false}, {name: 'poblaciondelegacion', allowBlank: false}, {name: 'emaildelegacion', allowBlank: false}, {name: 'telefonodelegacion', allowBlank: false}, {name: 'faxdelegacion', allowBlank: false}, {name: 'codpostaldelegacion', allowBlank: false}, {name: 'provinciadelegacion', allowBlank: false} ]); var writer = new Ext.data.JsonWriter({ encode: true, writeAllFields: true//<--- decide si se manda al servidor solamente los campos modificados o todos }); this.storeGrid = new Ext.data.Store({ id: "id", proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: true//<--- hace las peticiones al servidor automáticamente }); var textFieldEmail = new Ext.form.TextField({vtype: "email",allowBlank: false}), textFieldDelegacion = new Ext.form.TextField({allowBlank: false}), textFieldDomicilio = new Ext.form.TextField({allowBlank: false}), textFieldPoblacion = new Ext.form.TextField({allowBlank: false}), sm = new Ext.grid.CheckboxSelectionModel(); var textFieldTelefono = new Ext.form.TextField({ width: 80, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'999-999999', clearInvalid:false })] }); var textFieldFax = new Ext.form.TextField({ width: 80, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'999-999999', clearInvalid:false })] }); var textFieldCP = new Ext.form.TextField({ width: 60, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'99999', clearInvalid:false })] }); var pag = new Ext.PagingToolbar({ store:this.storeGrid ,displayInfo:true ,pageSize:1 }); this.grid = new Ext.grid.EditorGridPanel({ store: this.storeGrid, columns: [ sm, {header:'Delegación', dataIndex:'descdelegacion',width:180,sortable: true, editor:textFieldDelegacion}, {header:'E-mail', dataIndex:'emaildelegacion',sortable: true,width:180,editor:textFieldEmail}, {header:'Domicilio', dataIndex:'domiciliodelegacion',sortable: true,width:150, editor:textFieldDomicilio}, {header:'Población', dataIndex:'poblaciondelegacion',sortable: true,width:150, editor:textFieldPoblacion}, {header:'Cod.Postal', dataIndex:'codpostaldelegacion',sortable: true,width:60, editor:textFieldCP}, {header:'Teléfono', dataIndex:'telefonodelegacion',sortable: true,width:70, editor:textFieldTelefono}, {header:'Fax', dataIndex:'faxdelegacion',sortable: true,width:70, editor:textFieldFax}, {header:'Provincia', dataIndex:'provinciadelegacion',sortable: true,width:90, editor:provin} ], sm: sm, border: false, stripeRows: true, bbar: pag, clicksToEdit: 1 }); this.storeGrid.load({params: {start:0, limit: 1}}); this.grid.on('save',this.aviso); var win = new Ext.Window({ title: "eProject - Gestión Delegaciones", layout: "fit", tbar: [ {text:'Añadir Delegación', scope:this, handler:this.addContact,iconCls:'save-icon'}, {text:"Eliminar Selección", scope:this, handler:this.onDelete,iconCls:'delete-icon'}, {text:"Exportar", scope:this, handler:this.exportPDF,iconCls:'pdf-icon'}, {text:"Exportar", scope:this, handler:this.exportExcel,iconCls:'excel-icon'} ], width: 1000, height: 300, items: [this.grid] }); win.show(); }, aviso: function() { alert("aviso"); }, onDelete : function(){ var rows = this.grid.getSelectionModel().getSelections(); if(rows.length === 0){ return false; } this.storeGrid.remove(rows); Ext.MessageBox.alert('eProject','Registro(s) Eliminado(s) Con Éxito'); }, addContact : function(){ var contact = new this.storeGrid.recordType({ delegacion: "", domicilio: "", poblacion: "", email: "", cp: "", telefono: "", fax: "", provincia: "", }); this.grid.stopEditing(); this.storeGrid.insert(0,contact); this.grid.startEditing(0,1); }, exportPDF: function(){ var rows = this.grid.getSelectionModel().getSelections(); var nSeleccionados = rows.length; var nElementos = this.storeGrid.getCount(); var seleccionados = new Array(); if(rows.length === 0){ Ext.MessageBox.alert('eProject','No Ha Seleccionado Nada'); return false; } var i = 0; while (i<nSeleccionados) { seleccionados=rows.id; i=i+1; } location.href="listado-delegaciones-sel.php?seleccion="+seleccionados; }, exportExcel: function(){ alert("exportar a Excel"); } } Ext.onReady(com.quizzpot.tutorials.Crud.init,com.quizzpot.tutorials.Crud);
El caso es que al intentar editar una fila del grid, si que me aparece el dichoso combo con el displayField para poderlo seleccionar, pero al refrescar datos me vuelve a aparecer el valueField...
Gracias de antemano por su atención... Un saludo.
Estoy empezando con ExtJS (grid) y me encuentro con el siguiente problema, al cargar los datos en lugar de mostrarme el displayField, me muestra el valueField. Seguramente esté haciendo algo mal, pero al ser nueva no veo cómo arreglarlo, les dejo mi código.
Ext.ns("com.quizzpot.tutorials"); com.quizzpot.tutorials.Crud = { init : function() { //CRUD var proxy = new Ext.data.HttpProxy({ api: { read : "serverside/getContacts.php", create : "serverside/createContact.php", update: "serverside/updateContact.php", destroy: "serverside/destroyContact.php" } }); var rd_random_employee_data = new Ext.data.JsonReader({}, ['idprovincia', 'descprovincia']); var provincias = new Ext.data.Store({ reader: new Ext.data.JsonReader({ fields: ['idprovincia', 'descprovincia'], root: 'rows'}), proxy: new Ext.data.HttpProxy({ url: 'serverside/getProvincias.php' }), autoload:true }); var provin = new Ext.form.ComboBox({ id: 'idprovincia', store: provincias, valueField: 'idprovincia', displayField: 'descprovincia', mode: 'remote', minChars : 0 , autoload:true }); var reader = new Ext.data.JsonReader({ totalProperty: 'total', successProperty: 'success',//<--- el successproperty indica la propiedad que define si se ha insertado/actualizado o borrado con éxito messageProperty: 'message', idProperty: 'coddelegacion', root: 'data'//<--- este es el nombre del parámetro que llega al servidor con el JSON modificado },[ {name: 'descdelegacion', allowBlank: false}, {name: 'domiciliodelegacion', allowBlank: false}, {name: 'poblaciondelegacion', allowBlank: false}, {name: 'emaildelegacion', allowBlank: false}, {name: 'telefonodelegacion', allowBlank: false}, {name: 'faxdelegacion', allowBlank: false}, {name: 'codpostaldelegacion', allowBlank: false}, {name: 'provinciadelegacion', allowBlank: false} ]); var writer = new Ext.data.JsonWriter({ encode: true, writeAllFields: true//<--- decide si se manda al servidor solamente los campos modificados o todos }); this.storeGrid = new Ext.data.Store({ id: "id", proxy: proxy, reader: reader, writer: writer, autoLoad: true, autoSave: true//<--- hace las peticiones al servidor automáticamente }); var textFieldEmail = new Ext.form.TextField({vtype: "email",allowBlank: false}), textFieldDelegacion = new Ext.form.TextField({allowBlank: false}), textFieldDomicilio = new Ext.form.TextField({allowBlank: false}), textFieldPoblacion = new Ext.form.TextField({allowBlank: false}), sm = new Ext.grid.CheckboxSelectionModel(); var textFieldTelefono = new Ext.form.TextField({ width: 80, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'999-999999', clearInvalid:false })] }); var textFieldFax = new Ext.form.TextField({ width: 80, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'999-999999', clearInvalid:false })] }); var textFieldCP = new Ext.form.TextField({ width: 60, allowBlank:false, maskRe : /['0-9'.-]$/, plugins: [new Ext.ux.InputTextMask({ mask:'99999', clearInvalid:false })] }); var pag = new Ext.PagingToolbar({ store:this.storeGrid ,displayInfo:true ,pageSize:1 }); this.grid = new Ext.grid.EditorGridPanel({ store: this.storeGrid, columns: [ sm, {header:'Delegación', dataIndex:'descdelegacion',width:180,sortable: true, editor:textFieldDelegacion}, {header:'E-mail', dataIndex:'emaildelegacion',sortable: true,width:180,editor:textFieldEmail}, {header:'Domicilio', dataIndex:'domiciliodelegacion',sortable: true,width:150, editor:textFieldDomicilio}, {header:'Población', dataIndex:'poblaciondelegacion',sortable: true,width:150, editor:textFieldPoblacion}, {header:'Cod.Postal', dataIndex:'codpostaldelegacion',sortable: true,width:60, editor:textFieldCP}, {header:'Teléfono', dataIndex:'telefonodelegacion',sortable: true,width:70, editor:textFieldTelefono}, {header:'Fax', dataIndex:'faxdelegacion',sortable: true,width:70, editor:textFieldFax}, {header:'Provincia', dataIndex:'provinciadelegacion',sortable: true,width:90, editor:provin} ], sm: sm, border: false, stripeRows: true, bbar: pag, clicksToEdit: 1 }); this.storeGrid.load({params: {start:0, limit: 1}}); this.grid.on('save',this.aviso); var win = new Ext.Window({ title: "eProject - Gestión Delegaciones", layout: "fit", tbar: [ {text:'Añadir Delegación', scope:this, handler:this.addContact,iconCls:'save-icon'}, {text:"Eliminar Selección", scope:this, handler:this.onDelete,iconCls:'delete-icon'}, {text:"Exportar", scope:this, handler:this.exportPDF,iconCls:'pdf-icon'}, {text:"Exportar", scope:this, handler:this.exportExcel,iconCls:'excel-icon'} ], width: 1000, height: 300, items: [this.grid] }); win.show(); }, aviso: function() { alert("aviso"); }, onDelete : function(){ var rows = this.grid.getSelectionModel().getSelections(); if(rows.length === 0){ return false; } this.storeGrid.remove(rows); Ext.MessageBox.alert('eProject','Registro(s) Eliminado(s) Con Éxito'); }, addContact : function(){ var contact = new this.storeGrid.recordType({ delegacion: "", domicilio: "", poblacion: "", email: "", cp: "", telefono: "", fax: "", provincia: "", }); this.grid.stopEditing(); this.storeGrid.insert(0,contact); this.grid.startEditing(0,1); }, exportPDF: function(){ var rows = this.grid.getSelectionModel().getSelections(); var nSeleccionados = rows.length; var nElementos = this.storeGrid.getCount(); var seleccionados = new Array(); if(rows.length === 0){ Ext.MessageBox.alert('eProject','No Ha Seleccionado Nada'); return false; } var i = 0; while (i<nSeleccionados) { seleccionados=rows.id; i=i+1; } location.href="listado-delegaciones-sel.php?seleccion="+seleccionados; }, exportExcel: function(){ alert("exportar a Excel"); } } Ext.onReady(com.quizzpot.tutorials.Crud.init,com.quizzpot.tutorials.Crud);
El caso es que al intentar editar una fila del grid, si que me aparece el dichoso combo con el displayField para poderlo seleccionar, pero al refrescar datos me vuelve a aparecer el valueField...
Gracias de antemano por su atención... Un saludo.
