Come aggiungere una riga collegamento ipertestuale per un extJS Griglia?

Per favore qualcuno può far luce su come andare circa il rendering di un collegamento ipertestuale in cellule di una particolare colonna ExtJS?
Ho provato associazione la colonna di una funzione di rendering in il mio JS, da cui posso inviare il codice html:

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

Tuttavia, con questo, il problema è che, una volta mi ha colpito il controller tramite il link, la navigazione è successo, ma le successive navigazioni per la griglia dei dati mostra solo i record vuoti.

I record vengono recuperati dal DB con successo la Primavera controller MVC, ho controllato.

Si prega di notare che questo accade solo una volta ho utilizzare la riga collegamento ipertestuale nel extJS griglia di navigare lontano dalla griglia. Se mi vieni a griglia, e navigare altrove e di nuovo tornare alla griglia, i dati vengono visualizzati bene.
Il problema si verifica solo in caso di navigazione dalla griglia, utilizzando il collegamento ipertestuale reso in una qualsiasi delle celle.

Grazie per il vostro aiuto!

InformationsquelleAutor PaiS | 2010-07-26

 

Tags: , ,

7 Replies
  1. 1

    Ho creato un renderer, così sembrava che si stesse facendo clic su di esso.

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

    Ma ho usato una cella evento per gestire il click.

    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
        }
    }
}
    • Buona risposta, tranne una) credo che il a esigenze href a guardare come un link e b) si preferisce confrontare il nome del campo che si possono ottenere da grid.getColumnModel().getDataIndex(column) che l’indice di colonna.
    • utilizza la colonna == 1 non è una buona pratica come se la colonna di ordinamento o di beni mobili di proprietà non è impostata su false, l’utente può ri-ordinare la colonna attraverso il drag and drop, e quindi la colonna per la colonna potrebbe cambiare, in modo da utilizzare con cautela
    InformationsquelleAutor CrazyEnigma
  2. 15

    Questo è per ExtJS 4 e 5.

    Utilizzare un renderer per rendere il contenuto è simile al seguente link:

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

    Quindi utilizzare documenti generati dinamicamente Vista evento cellclick di processo 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'));
            }
        }
    }
}
    InformationsquelleAutor AndreKR
  3. 2

    Invece di utilizzare un tag di ancoraggio, avrei probabilmente usare del semplice contenuto di una cella in stile a guardare come un ancoraggio (utilizzo di base dei CSS) e gestire il cellclick caso di GridPanel per gestire l’azione. Questo evita l’incontro con l’ancora predefinita, fare clic comportamento a ricaricare la pagina (che è quello che sto assumendo che sta accadendo).

    • Utilizzando un tag di ancoraggio è meglio il markup semantico. Anche il modo di riprodurre accuratamente i dettagli come l’icona del puntatore del mouse utilizzando i CSS.
    InformationsquelleAutor Brian Moeskau
  4. 2

    Provare qualcosa di simile a questo:

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

    Tuttavia il mio grazie – ExtJS Griglia di Dati della Colonna di rendering per avere più valori

    InformationsquelleAutor Vijay
  5. 1

    Per questi scopi io uso CellActions o RowActions plugin a seconda di che cosa ho veramente bisogno e gestire cella fare clic attraverso di essa.

    Se si desidera qualcosa che assomiglia a un’ancora, utilizzare <span>, invece, e fare quello che @bmoeskau suggerito.

    InformationsquelleAutor Igor Pavelek
  6. 0

    È possibile utilizzare ‘renderer’ di funzione per inserire tutto il codice HTML che si desidera in cella.

    InformationsquelleAutor Thevs
  7. 0

    Grazie ragazzi per la vostra risposta.
    Dopo il debug extJS-all.js script, ho trovato il problema, per essere sul lato server.

    Nella mia Primavera controller MVC, mi è stato la creazione del modello per la sessione, che nel caso di utilizzo ho accennato in precedenza, utilizzato per ripristinare il “totalProperty” di Ext.dati.XmlStore a 0, e quindi i successivi riscontri la griglia utilizzata per la visualizzazione di record vuoti.

    Questo perché, ext-JS griglia, controlla “totalProperty” valore prima ancora che scorre i record dall’archivio. Nel mio caso, il dataStore aveva dati, ma la dimensione è stata reimpostata a null, e quindi il problema si presentò.

    Grazie a tutti ancora per i tuoi ingressi!

    InformationsquelleAutor PaiS

Lascia un commento