ExtJS: Enlaces AJAX en Grid en Tab en Ventana

Question

Estoy trabajando en mi primer proyecto usando ExtJS.

Tengo una cuadrícula de datos dentro de una pestaña que está dentro de una ventana.

Deseo agregar un enlace o botón a cada elemento de la cuadrícula (en este momento estoy usando elementos extendidos con contenido HTML a través del RowExpander) que realizará una llamada AJAX y abrirá otra pestaña.

Answer 1

Realmente resolví esto al final. Bastante complicado, y digamos que no me involucraré nuevamente con ExtJS si puedo evitarlo.

Estoy usando el Grid.RowExpander para colocar HTML dentro del Grid usando XTemplate. Por lo tanto, mis enlaces son bastante sencillos:

<a href="#" class="add_cart_btn" id="{product_id}" onclick="return false;">Add to Cart</a>

Donde {product_id} es de datos JSON cargados desde una consulta Ajax. Esto es importante, como verá a continuación.

Encontrar estos eventos es mucho más difícil ... la Cuadrícula puede indicarte la fila, pero en realidad necesitaba agarrar elementos de una tabla dentro de la fila de la cuadrícula. Larga historia, pero heredé parte de este código.

Luego, en mi componente principal, adjunté un evento a la Cuadrícula misma.

this.on({       
  click :{scope: this, fn:this.actionGridClick} 
});

Para encontrar el enlace real, busco el enlace en el destino que tiene la clase correcta. En este caso " add_cart_btn "

actionGridClick:function(e) {
  // Looking for a click on a cart button
  var addCartEl = Ext.get(e.getTarget('.add_cart_btn'));   
  if(addCartEl) {
    productID = addCartEl.id;
    // Once we have the ID, we can grab data from the data store
    // We then call to the server to complete the "add to cart" functionality
  }
}

Mpst de esto no es muy útil, excepto en mi caso, pero está aquí para la posteridad si alguien necesita algo similar en el futuro.

Answer 2

Prueba esto:

// create grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: 'NAME', width: 170, sortable: true, dataIndex: 'name'},
        {header: 'PHONE #', width: 150, sortable: true, dataIndex: 'phone'},
        {header: 'BIRTHDAY', width: 100, sortable: true, dataIndex: 'birthday',
            renderer: Ext.util.Format.dateRenderer('d/m/Y')},
        {header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email',
            renderer: renderIcon }
    ],
    title: 'My Contacts',
    autoHeight:true,
    width:600,
    renderTo: document.body,
    frame:true
});

Vea esto:

{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email', renderer: renderIcon }

el renderizador se definirá así:

//image path
var IMG_EMAIL = '/gridcell-with-image/img/email_link.png';

//renderer function
function renderIcon(val) {
    return '<a href="mailto:' + val + '">'+ '<img src="' + IMG_EMAIL + '"> ' + val  +'</a>';
}

Y aquí estás :)

Answer 3

Si desea agregar el enlace a la cuadrícula, puede especificar otra columna en su modelo de columna y aplicar un renderizador a la columna. La función del renderizador es devolver contenido formateado para que se aplique a esa celda, que se puede adaptar de acuerdo con el valor del dataIndex de la columna (debe tener un dataIndex, incluso si es un duplicado de otra columna), y el registro de esa fila.

function myRenderer(value,meta,record,rowIndex,colIndex,store){
    // Do something here
}

Su enlace podría tener un evento de clic para llamar a un método, abriendo otra pestaña

function myClickEvent(value1, value2){
     var myTabs = Ext.getCmp('myTabPanel');
     myTabs.add(// code for new tab);
}

Si está agregando los enlaces a su área expandida, dentro del RowExpander, entonces tendrá que escribir el renderizado en la Plantilla que está usando para su área de contenido expandido.