Foro

[R]Obtener elementos seleccionados de un grid

0
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.
0
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.