ExtJS: collegamenti AJAX nella griglia nella scheda nella finestra

Question

Sto lavorando al mio primo progetto usando ExtJS.

Ho una griglia dati all'interno di una scheda che si trova all'interno di una finestra.

Voglio aggiungere un link o un pulsante a ciascun elemento della griglia (al momento sto usando elementi estesi con contenuto HTML tramite RowExpander) che farà una chiamata AJAX e aprirà un'altra scheda.

Answer 1

Alla fine l'ho risolto. Abbastanza contorto, e diciamo solo che non mi impegnerò di nuovo con ExtJS se posso aiutarlo.

Sto usando Grid.RowExpander per posizionare HTML all'interno della griglia usando XTemplate. I miei collegamenti sono quindi abbastanza semplici:

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

Dove {product_id} proviene da dati JSON caricati da una query Ajax. Questo è importante, come vedrai di seguito.

Trovare questi eventi è molto più difficile ... la griglia può dirti la riga, ma in realtà avevo bisogno di prendere elementi da una tabella all'interno della riga della griglia. Lunga storia, ma ho ereditato parte di questo codice.

Quindi nel mio componente genitore ho allegato un evento alla griglia stessa.

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

Per trovare il collegamento effettivo, cerco il collegamento nella destinazione che ha la classe corretta. In questo 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
  }
}

Il primo di questi non è molto utile, tranne nel mio caso, ma è qui per i posteri se qualcuno ha bisogno di qualcosa di simile in futuro.

Answer 2

Prova questo:

// 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
});

Vedi questo:

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

il renderer verrà definito come questo:

//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>';
}

Ed eccoti qui :)

Answer 3

Se stai cercando di aggiungere il link alla griglia stessa, puoi specificare un'altra colonna in ColumnModel e applicare un renderer alla colonna. La funzione del renderer è di restituire contenuto formattato da applicare a quella cella, che può essere personalizzato in base al valore di dataIndex della colonna (dovresti avere un dataIndex, anche se è un duplicato di un'altra colonna), e il record di quella riga.

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

Il tuo link potrebbe contenere un evento click per chiamare un metodo, aprendo un'altra scheda

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

Se stai aggiungendo i collegamenti alla tua area espansa, all'interno di RowExpander, dovrai scrivere il rendering nel modello che stai utilizzando per l'area del contenuto espanso.