Foro

[Solucionado] - Recuperar informacion de cada fila por un ID

0
Tengo una duda, por cada fila, es decir por el ID, quiero que este se direccionar ejemplo, ah superfil. es decir por cada fila, por cada registro quiero que cuando haga click ah la misma fila o a un boton me lleve a su detalle, o perfil, como lo haria con extjs? 
var agendaDataStore;
var agendaColumnModel;
var agendaListingEditorGrid;
var agendaListingWindow;
Ext.onReady(function(){
  Ext.QuickTips.init();
  
  agendaDataStore = new Ext.data.Store({
      id: 'agendaDataStore',
      proxy: new Ext.data.HttpProxy({
                url: 'proyect.php', 
                method: 'POST'
            }),
            baseParams:{envio: "LISTAR"}, 
			
      reader: new Ext.data.JsonReader({
        root: 'results',
        totalProperty: 'total'
        //id: 'id'
   },[ 
		{name: 'dt_time', type: 'string', mapping: 'dt_time'},
		{name: 'dt_fecha', type: 'date', mapping: 'dt_fecha'},
		{name: 'st_ubicacion' , type: 'string', mapping: 'st_ubicacion'},
		{name: 'st_asunto', type: 'string', mapping: 'st_asunto'}
		      
	  ]),
      sortInfo:{field: 'dt_fecha', direction: "ASC"}
    });
    
  agendaColumnModel = new Ext.grid.ColumnModel(
    [{
        header: 'Hora',
        dataIndex: 'dt_time',
        width: 100
      },{
				header: 'Fecha',
				dataIndex: 'dt_fecha',
				width: 120,
				renderer: Ext.util.Format.dateRenderer('m/d/Y'),
				editor: new Ext.form.DateField({
					format: 'm/d/Y'
				}),
				hidden: false
	 },{
        header: 'Ubicacion',
        dataIndex: 'st_ubicacion',
        width: 100                  
      },{
        header: 'Informacion Adicional',
        dataIndex: 'st_asunto',
        width: 340
      }] 
    );
    agendaColumnModel.defaultSortable= true;
  
     agendaListingEditorGrid =  new Ext.grid.EditorGridPanel({
      id: 'agendaListingEditorGrid',
      store: agendaDataStore,
      cm: agendaColumnModel,
      enableColLock:false,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
	    bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: agendaDataStore,
                displayInfo: true
            }),
	  tbar: [{
            text: 'Borrar Cita',
            tooltip: 'Seleccione una Cita ',
            handler: confirmDeleteagenda,   
            iconCls:'remove'
      }] 
    });
    
    
  agendaListingWindow = new Ext.Window({
      id: 'agendaListingWindow',
      title: 'Proyect',
      draggable:false,
      closable:false,
	  resizable : false,
      width:600,
      height:350,
      plain:true,
      layout: 'fit',
      items: agendaListingEditorGrid
    });
  agendaDataStore.load({params: {start: 0, limit: 10}});
  agendaListingWindow.show();
  
});

16 Respuestas

Mejores votos Por fecha Solución
0
hola mehparra, mira los grid tienen un listener que se llama rowclick y se dispara cuando una fila es seleccionada y con eso puedes tener todos los datos de esa fila, trabaja mas o menos asi: 
listeners: {
				rowclick: function(grid,rowindex,e){
                     
                    var fila=grid.getStore().getAt(rowindex); //obtengo la fila con todos sus campos
                  //alert("ID: "+fila.get('VID_IDE')+" Titulo: "+fila.get('VID_TIT')); //<--de esta manera puedo obtener el valor de cada columna de la fila que he seleccionado (ya teniendo tu ID.. ya tu decides que hacer con él.
                  
                }
            }
Espero que te ayude un poco... igual ya vendran lo expertos a sacarte de toda duda..
0
Puedes utilizar el evento "rowclick" o "rowdblclick", los cuales reciben tres parámetros, ( Grid this, Number rowIndex, Ext.EventObject e ), el más importante es el "rowIndex" pues con este puedes sacar el store la información necesaria, luego crea una ventana o panel o lo que necesites con los campos que necesites mostrar y le pasas la información que sacas del store <!-- s;) --><!-- s;) --> 
grid.on('rowclick',function(grid,index,event){
   var info = grid.getStore().getAt(index);
   var panel = new Ext.Window({
      title: 'Detalle',
      .....
      items: [....{value:info.get('nombre')}....] //<-- aqui le asignas el value
   });
   panel.show();
});
saludos y espero me hallas entendido jejejejeje
0
Gracias, de echo ahora mismo lo probaré que tal como me va. Pregunta, pero y si quiero que me direccione ah una Pagina Php, es decir: - La pagina perfil ya está echa. enteramente en php, el proyecto es ( php y algunas cosas en extjs ), lo que queria es que por el ID me direccione a cada perdil ya establecido. algo por ahí va el problema. Muchas Gracias.
0
mmmmmmm....... bueno... en ese caso puedes ponerle un iframe a la ventana y en la url pasarle el parámetro que encesesites. 
grid.on('rowclick',function(grid,index,event){
   var info = grid.getStore().getAt(index);
   var panel = new Ext.Window({
      title: 'Detalle',
      .....
      html: '<iframe src="/detalle.php?id='+info.get('id')+'" style="border:none;width:100%;height:100%" ></iframe>'
   });
   panel.show();
});
saludos
0
Aps, me sale la ventana, pero carga , carga , carga y no sale la data, seguire tanteando, de ahi les cuento.
0
pinte eso, lo hice con el codigo de arriba, pero nada =/, me sale la ventana windows, pero no me pinta los campos 
	agendaListingEditorGrid.on('rowclick',function(agendaListingEditorGrid,index,event){
   	var info = agendaListingEditorGrid.getStore().getAt(index);
   	var panel = new Ext.Window({ 
      title: 'Detalle Perfil ',
      width:400,
      height:400,
      	items: [{
			value:info.get('id_agenda')
     
			  },{
			value:info.get('st_asunto')
			  }] 
   		});
   			panel.show();
		});
0
trata de definir mejor los... items con xtype:textfield (por ejemplo) o definir los campos default para el panel. intenta haciendo algo así para cada item items:[ { name:'id' xtype: 'textfield', value: info.get('id_agenda'), readOnly : true } ] ahora.. si te muestra la ventana pero los campos siguen vacios.. trata de hacer un alert donde muestres ambos datos y así sabes si estas tomando bien.. algo como Ext.Msg.alert("ID: "+info.get('id_agenda'));
0
Crespo Gracias, Stock Gracias, ya lo resolvi, en verdad gracias por las pautas. Saludos.
0
Me da mucho gusto saber que lo resolviste!! <!-- s:D --><!-- s:D --> Podrías decirnos cómo lo hiciste?? dejar un poco de código? así si a alguien más se le presenta el problema sabrá como resolverlo..
0
<!-- s:D --><!-- s:D --> Ahí esta. 
	favoritoListingEditorGrid.on('rowclick',function(favoritoListingEditorGrid,index,event){
   	var info = favoritoListingEditorGrid.getStore().getAt(index);
   	var panel = new Ext.Window({ 
      title: 'Detalle Perfil ',
      width:800,
      height:500,
      	items: [{
				name:'st_razsoc',
				xtype: 'textfield',
				value: info.get('st_razsoc'),
				width: 300,
				readOnly : true 
			  },{
				name:'st_stands',
				xtype: 'textfield',
				value: info.get('st_stands'),
				width: 300,
				readOnly : true 
			  }] 
   		});
   			panel.show();
		});
Pregunta: estaba mirando uno de los ultimos ejemplos en la Web, de cargar imagenes dinamicas, pero lo probe con Ext 2.x y no me sale nada, al html le puse toda la referencia para que indique y nada, no puedo mostrar una foto dinamicamente, algum ejemplo por ahi?
0
en donde quieres mostrar la foto? en un panel? 
var imgDinamica = 'images/imagenRandom.jpg';
var panel = new Ext.Panel({
   html: '<img id="imgDinamica" src="'+imagenDinamica+'" alt="Descripción de la imagen" />'
});
// o bien si quieres modificarla así:
Ext.get('imgDinamica').dom.src = 'images/otraImage.jpg';
luego ese panel lo insertas lo insertas o asignas a quien quieras. saludos
0
En un Grid stock, en un Grid me puedes poner un ejemplo.
0
te refieres a esto: <!-- m -->http://www.quizzpot.com/demos/extjs/gri ... ormat.html<!-- m --> poner una imagen en una celda: <!-- m -->http://www.quizzpot.com/2009/07/formato ... as-celdas/<!-- m --> el tut esta con la versión 3, pero ya lo prove con la versión 2.2.1 y funciona correctamente lo de msotrar la imagen <!-- s:D --><!-- s:D --> (el paginador no funciona).
0
si me refería a eso, Bueno ya me imaginaba, mi problema es que estoy con el appserv, y debo de importar la libreria JSON. voy a probarlo con el Wamp desde la otra Pc haber como va <!-- s:D --><!-- s:D -->
0
yo también estoy con el APPServ <!-- s;) --><!-- s;) --> actualiza tu versión <!-- s:D --><!-- s:D --> saludos
0
Bueno ya lo resolvi =), ahorita pongo codigo =) Es como dijo stock en su manual. Funcion. function variable_img(value){ return '<img src=images/'+valuel+'>'; } y luego en el Grid lo Renderizas. para que antes que se refresce llame a la funcion =) favoritoColumnModel = new Ext.grid.ColumnModel( [{ header: 'Fotos', dataIndex: 'in_foto', width: 180, renderer:variable_img }] PD: de echo la imagen el nombre debe estar en la Bd, y en el directorio images, la foto debe de llevar el mismo nombre, con eso no habria problemas ya =)

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

Tags

Ext JS 3