Comment ajouter une ligne de lien hypertexte d'un extJS Grille?

Quelqu'un peut s'il vous plaît jeter une certaine lumière sur la façon d'aller sur la génération d'un lien hypertexte dans les cellules d'une colonne particulière dans ExtJS?
J'ai essayé de liaison de la colonne à une fonction rendu dans mon JS, à partir de laquelle j'ai renvoyer le code html:

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

Toutefois, dans ce cas, le problème est que, une fois que j'ai touché le contrôleur à travers le lien, la navigation est un succès, mais la suite des navigations à la grille de données afficher uniquement les enregistrements vides.

Les documents récupérés à partir de la DB avec succès à travers le contrôleur Spring MVC, j'ai vérifié.

Veuillez noter que cela n'arrive qu'une fois j'ai utiliser la ligne de lien hypertexte dans le extJS grille de naviguer hors de la grille. Si je viens à la grille, et de naviguer ailleurs et encore revenir à la grille, les données s'affichent bien.
Le problème se produit uniquement en cas de naviguer en dehors de la grille, en utilisant le lien hypertexte rendus dans l'une des cellules.

Merci pour votre aide!

InformationsquelleAutor PaiS | 2010-07-26

1

J'ai créé un moteur de rendu donc, il semblait comme si vous étiez en cliquant sur elle.
```
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
//Using CellClick to invoke
return "<a>View</a>";
},
```
Mais j'ai utilisé une cellule de l'événement pour gérer le 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
        }
    }
}
```
- Bonne réponse, à l'exception d'un) je pense que le a besoins href à ressembler à un lien et b) que vous préférez comparer le nom du champ que vous pouvez obtenir à partir d' grid.getColumnModel().getDataIndex(column) que l'index de colonne.
- à l'aide de la colonne == 1 n'est pas une bonne pratique que si la colonne de la commande ou de biens mobiliers n'est pas défini à false, alors l'utilisateur peut re-commande de la colonne à l'aide de glisser-déposer, et donc la colonne n de votre colonne pourrait changer, donc à utiliser avec précaution
InformationsquelleAutor CrazyEnigma

C'est pour ExtJS 4 et 5.

Utiliser un convertisseur pour rendre le contenu ressembler à un lien:

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

Puis utilisez les sans-papiers, généré dynamiquement Vue événement cellclick pour traiter le 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

2

Au lieu d'utiliser une balise d'ancrage, je serais probablement utiliser du contenu de la cellule dessiné pour ressembler à un point d'ancrage (à l'aide de CSS de base) et de gérer la cellclick cas de la GridPanel pour gérer l'action. Cela évite de se préoccuper de l'ancre par défaut, cliquez sur le comportement de rechargement de la page (qui est ce que je suis en supposant que se passe).
- À l'aide d'une balise d'ancrage est mieux balisage sémantique. Aussi évite soigneusement de reproduire des détails tels que le pointeur de la souris de l'icône à l'aide de CSS.
InformationsquelleAutor Brian Moeskau

Essayer quelque chose comme cela:

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

Cependant mes remerciements à ExtJS de Données de la Colonne de la Grille rendu à plusieurs valeurs

InformationsquelleAutor Vijay

1

À ces fins, j'utilise CellActions ou RowActions plugin en fonction de ce dont j'ai réellement besoin et la poignée de la cellule, cliquez sur à travers elle.

Si vous voulez quelque chose qui ressemble à un point d'ancrage, l'utilisation <span> à la place, et ce que @bmoeskau suggéré.

InformationsquelleAutor Igor Pavelek
0

Vous pouvez utiliser le 'rendu' fonction pour inclure de code HTML que vous voulez dans la cellule.

InformationsquelleAutor Thevs
0

Merci les gars pour votre réponse.
Après le débogage de l'extJS-all.js script, j'ai trouvé la question pour être sur le côté serveur.

Dans mon contrôleur Spring MVC, j'étais fixant le modèle de la session, ce qui, dans le cas d'utilisation je l'ai mentionné plus tôt, utilisé pour réinitialiser le "totalProperty" de la Poste.les données.XmlStore à 0, et par conséquent, frappe à la grille, utilisée pour l'affichage des enregistrements vides.

C'est parce que, ext-JS grille, vérifie la "totalProperty" de la valeur, avant même qu'il parcourt les enregistrements de la base de données. Dans mon cas, la banque de données a données, mais la taille a été réinitialisé à la valeur null, et donc la question a montré jusqu'à.

Merci à tous encore pour vos entrées!

InformationsquelleAutor PaiS

Vous devez vous connecter pour publier un commentaire.