¿Cómo agregar un hipervínculo de fila para una grilla extJS?

Question

¿Alguien puede arrojar algo de luz sobre cómo hacer un hipervínculo en las celdas de una columna en particular en ExtJS? He tratado de unión de la columna a una función render en mis JS, de la que devolver el html:

<a href="ControllerName/viewName">SELECT</a> 

Sin embargo, con esto, el problema es que, una vez que me golpeó el controlador a través del enlace, el la navegación es exitosa, pero las navegaciones posteriores a la cuadrícula de datos solo muestran registros vacíos.

Los registros se obtienen de la DB con éxito a través del controlador Spring MVC, lo he comprobado.

Tenga en cuenta que esto sucede solo cuando utilizo el hipervínculo de filas en la grilla extJS para salir de la grilla. Si llego a la grilla, y navego en otro lado y vuelvo a la cuadrícula, los datos se muestran bien. El problema solo ocurre en caso de navegar fuera de la cuadrícula, usando el hipervínculo representado en una/cualquiera de las celdas.

Gracias por su ayuda!

Answer 1

Creé un renderizador por lo que parecía que estaba haciendo clic en él.

aRenderer: function (val, metaData, record, rowIndex, colIndex, store){ 
// Using CellClick to invoke 
return "<a>View</a>"; 
}, 

Pero utilicé un evento de celda para administrar el clic.

cellclick: { 
    fn: function (o, idx, column, e) { 
     if (column == 1) // Doesn't prevent the user from moving the column 
     { 
      var store = o.getStore(); 
      var record = store.getAt(idx); 
      // Do work 
     } 
    } 
} 

Answer 2

En lugar de usar una etiqueta de anclaje, probablemente usaría un contenido de celda simple diseñado para que parezca un anclaje (usando CSS básico) y manejaría el evento cellclick de GridPanel para manejar la acción. Esto evita lidiar con el comportamiento de clic predeterminado del ancla recargando la página (que es lo que estoy asumiendo que está sucediendo).

Answer 3

Para estos fines uso el plugin CellActions o RowActions dependiendo de lo que realmente necesito y manejo el clic de la celda a través de él.

Si quiere algo que parezca un anclaje, use <span> en su lugar y haga lo que @bmoeskau sugirió.

Answer 4

Puede usar la función 'renderer' para incluir cualquier HTML que desee en la celda.

Answer 5

Gracias chicos por su respuesta. Después de depurar el script extJS-all.js, encontré que el problema estaba en el lado del servidor.

En mi controlador Spring MVC, estaba configurando el modelo para la sesión, que en el caso de uso que mencioné anteriormente, solía restablecer "totalProperty" de Ext.data.XmlStore a 0, y por lo tanto, las visitas posteriores a la grilla, utilizada para mostrar registros vacíos.

Esto se debe a que, ext-JS grid, verifica el valor de "totalProperty", incluso antes de recorrer los registros de dataStore. En mi caso, la tienda de datos tenía datos, pero el tamaño se restableció a nulo, y de ahí surgió el problema.

¡Gracias a todos nuevamente por sus entradas!

Answer 6

Pruebe algo como esto:

Ext.define('Names', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { type: 'string', name: 'Id' }, 
     { type: 'string', name: 'Link' }, 
     { type: 'string', name: 'Name' } 
    ] 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    columns: [ 
     { 
      text: 'Id', 
      dataIndex: 'Id' 
     }, 
     { 
      text: 'Name', 
      dataIndex: 'Name', 
      renderer: function (val, meta, record) { 
       return '<a href="' + record.data.Link + '">' + val + '</a>'; 
      } 
     } 
       ... 
       ... 
       ... 

Sin embargo, gracias a mis - ExtJS Data Grid Column renderer to have multiple values

Answer 7

Esto es para ExtJS 4 y 5.

Utilice un renderer para hacer que los contenidos se ven como una link:

renderer: function (value) { 
    return '<a href="#">'+value+'</a>'; 
} 

continuación, utilizar el indocumentado, generado dinámicamente View caso cellclick para procesar el clic:

viewConfig: { 
    listeners: { 
     cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) { 

      var linkClicked = (e.target.tagName == 'A'); 
      var clickedDataIndex = 
       view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex; 

      if (linkClicked && clickedDataIndex == '...') { 
       alert(record.get('id')); 
      } 
     } 
    } 
}