[R]Obtener elementos seleccionados de un grid
Lo que yo quisiera hacer es como obtener el elemento seleccionado, en este caso los campos del grid que quiero obtener de manera individual son: CIC_ID,CIC_INICIO,CIC_FIN, para poder enviarlos a mi archivo modelo y poder procesarlos. Cabe mencionar que solamente se pueden selecionar una sola fila
Dejo mi codigo a continuacion:
Ext.ns('ci.cca'); ci.cca.Ciclos = { inicio : function(){ //Begin function inicio Ext.QuickTips.init(); // Mostrar los errores del lado derecho de los campos Ext.form.Field.prototype.msgTarget = 'side'; //Extendemos la clase VTypes y creamos un tipo personalizado //el cual se aplicara a los textfields de nuestro formulario Ext.apply(Ext.form.VTypes, { CicloEsc: function(v) { return /^\d{4}$/.test(v); }, CicloEscText: 'Ciclo escolar incorrecto', CicloEscMask: /[\d\.]/i }); this.Record_CiclosCreados = new Ext.data.Record.create([ {name: 'CIC_ID' , type: 'int'}, {name: 'CIC_INICIO' , type: 'int'}, {name: 'CIC_FIN' , type: 'int'} ]); this.Reader_CiclosCreados = new Ext.data.JsonReader({ root : 'datos', totalProperty : 'total', id : 'CIC_ID'}, this.Record_CiclosCreados ); this.DataProxy_CiclosCreados = new Ext.data.HttpProxy({ url : 'ListaCiclosEscolares/', //-> system/application/controllers/ciclos.php method : 'POST' //-> Metodo de envio }) this.DataStore_CiclosCreados = new Ext.data.Store({ id : 'DS_cicloscreados', proxy : this.DataProxy_CiclosCreados, reader : this.Reader_CiclosCreados }); this.ColumnModel_CiclosCreados = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer(), { header : 'id_c', dataIndex : 'CIC_ID', hidden : true, //true=>Oculto, false=>Visible width : 30 },{ header : Lang.Ciclo.LabelBeginYear, dataIndex : 'CIC_INICIO', hidden : false, align : 'center', width : 120 },{ header : Lang.Ciclo.LabelEndYear, dataIndex : 'CIC_FIN', hidden : false, align : 'center', width : 120 }] ); //Barra de navegacion inferior del Grid this.BottomBar_Grid_CiclosCreados = new Ext.PagingToolbar({ store : this.DataStore_CiclosCreados, displayInfo : false }); this.DataStore_CiclosCreados.load(); this.Grid_CiclosCreados = new Ext.grid.EditorGridPanel({ id : 'ID_grid_ciclos_creados', store : this.DataStore_CiclosCreados, cm : this.ColumnModel_CiclosCreados, region : 'center', border : true, enableColLock : false, draggable : false, enableColumnResize : false, enableHdMenu : false, selModel : new Ext.grid.RowSelectionModel({ singleSelect:true }), bbar : this.BottomBar_Grid_CiclosCreados, stripeRows : true, width : 270, height : 220 }); this.FormularioCiclo = new Ext.FormPanel({ bodyStyle : 'padding:10px 10px 0px 10px', labelAlign : 'top', border : false, id : 'id_FormularioCiclo', region : 'center', items: [{ //1 layout:'column', border : false, items : [{ //2 columnWidth :.5, layout : 'form', border : false, items : [{ //2.1 xtype : 'textfield', fieldLabel : Lang.Ciclo.LabelBeginYear, name : 'CIC_INICIO', labelStyle : 'font-size:11px;', fieldClass : 'estilotextfield', allowBlank : false, vtype : 'CicloEsc', width : 100 }] //2.1 },{ columnWidth :.5, layout : 'form', border : false, items : [{ //2.2 xtype : 'textfield', fieldLabel : Lang.Ciclo.LabelEndYear, name : 'CIC_FIN', labelStyle : 'font-size:11px;', fieldClass : 'estilotextfield', allowBlank : false, vtype : 'CicloEsc', width : 100 }] //2.2 }] //2 },this.Grid_CiclosCreados] //1 }); /*====================================================================================================================================== Barra de herramientas de la ventana principal. ========================================================================================================================================*/ this.TBarWindowMain = new Ext.Toolbar({ xtype:'buttongroup', items: [ { tooltip : Lang.BtnsTbar.BtnTbAdd, iconCls : 'btn_tb_save', scale : 'small', scope : this, handler : this.GuardarDatos },'-',{ tooltip : Lang.BtnsTbar.BtnTbDelete, iconCls : 'btn_tb_delete', scope : this, scale : 'small', handler : this.Handler_EliminarCicloSeleccionado },'-', new Ext.Button({ text : Lang.Ciclo.LabelChangeCiclo, tooltip : Lang.Ciclo.LabelChangeCiclo, iconCls : 'cambiar_ciclo', scope : this, handler : this.Handler_CambiarCicloEscolar }) ] }); this.WindowMain = new Ext.Window({ title : Lang.Ciclo.TitleWinCiclos, width : 305, height : 360, iconCls : 'icon_window', closable : false, resizable : false, draggable : false, region : 'center', layout : 'fit', tbar : this.TBarWindowMain, items : [this.FormularioCiclo] }); //Mostramos la ventana principal this.WindowMain.show(this); }, //End function inicio /*====================================================================================================================================== Funcion para confirmar el cambio del ciclo escolar ========================================================================================================================================*/ Handler_CambiarCicloEscolar : function(){ //Begin function Handler_CambiarCicloEscolar var selectedKey_Grid_Ciclos = this.Grid_CiclosCreados.selModel.selections.keys; if(selectedKey_Grid_Ciclos.length > 0){ Ext.MessageBox.show({ title : Lang.MsgBox.TitleMsg, msg : Lang.Ciclo.ChangeCiclo, buttons : Ext.MessageBox.YESNO, icon : Ext.MessageBox.INFO, scope : this, fn : this.CambiarCicloEscolar, width : 400 }); } else{ Ext.MessageBox.show({ title : Lang.MsgBox.TitleMsg, msg : Lang.Ciclo.SelectCiclo, buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.ERROR, width : 300 }); } }, // End function Handler_CambiarCicloEscolar /*====================================================================================================================================== Funcion para cambiar el ciclo escolar ========================================================================================================================================*/ CambiarCicloEscolar : function(btn,rec){ //Begin function CambiarCicloEscolar if(btn=='yes'){ //btn=='yes' // Aqui iria el codigo }); } //btn=='yes' } // End function CambiarCicloEscolar } Ext.onReady(ci.cca.Ciclos.inicio,ci.cca.Ciclos);He probado con agregarle esto despues de la creacion del grid:
this.Grid_CiclosCreados.on('rowclick',function( grid, row, evt){ this.DataStore_CiclosCreados.getAt(row); });y el FireBug me tira el siguiente error:
this.DataStore_CiclosCreados is undefined¿A que creen que se debe el problema que muestra Firebug? Muchas gracias por su ayuda.
Lo he solucionado agregandole este codigo al grid:
listeners:{ scope : this, 'rowclick' : function (grid, row, evt){ var movRecord = this.DataStore_CiclosCreados.getAt(row); ID_CICLO_SELECCIONADO = movRecord.data.CIC_ID; CICLO_INICIO = movRecord.data.CIC_INICIO; CICLO_FIN = movRecord.data.CIC_FIN; Ext.MessageBox.alert(ID_CICLO_SELECCIONADO,CICLO_INICIO +' - '+ CICLO_FIN); } }
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.