Ajouter un bouton à la grille dans ExtJs

Question

Je suis très nouveau avec Extjs. Est-ce que quelqu'un sait comment ajouter un bouton à chaque ligne de la grille dans Extjs? S'il vous plaît, donnez-moi un exemple.

Merci

Answer 1

vous devez utiliser un moteur de rendu personnalisé, mais je vous conseille d'utiliser un bouton de la barre d'outils à la place plus propre.

Si vous voulez avoir plus de référence ici, venez le documentation de la classe ColumnModel.

de toute façon cela donnerait quelque chose comme ça

var grid = new Ext.grid.GridPanel({ 
     store: store, 
     columns: [ 
      {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}, 
      {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, 
      {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'}, 
      {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, 
      {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}, 
      {header: 'action', width: 85, sortable: false, renderer: function(val){ return '<input type="button" value="toto" id="'+val+'"/>'; }, dataIndex: 'somefieldofyourstore'} 


     ], 
     stripeRows: true, 
     autoExpandColumn: 'company', 
     height: 350, 
     width: 600, 
     title: 'Array Grid', 
     // config options for stateful behavior 
     stateful: true, 
     stateId: 'grid'   
    }); 

cet extrait est un extrait de this sample.

Pour le chemin de la barre d'outils je vous conseille, il suffit d'ajouter un bouton à la barre d'outils du GridPanel et accrocher le SelectionModel de sorte que vous pouvez désactiver les boutons lorsque l'utilisateur ne sélectionne aucune ligne.

Answer 2

Actualy Ext.Buttons dans une cellule de ligne est aussi loin que je peux dire impossible avec la configuration actuelle de Ext. Bien sûr, il est effectivement possible de rendre le code HTML d'un bouton dans le div de la cellule, mais je pense en fait que ce serait une mauvaise idée.

Une meilleure façon consiste à implémenter le plugin de Saki, qui permet d'ajouter facilement des boutons/actions à chaque ligne.

http://rowactions.extjs.eu/

Answer 3

Vous pouvez vérifier ici, espère que ça aide!

http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/

Answer 4

Je vais ajouter une réponse supplémentaire à cette question parce que depuis que cette question a été posté j'ai créé une extension pour la composante de grille ExtJS qui permet aux boutons à ajouter aux colonnes de la grille.

https://github.com/Inventis/Ext.ux.grid.ButtonColumn

Soyez conscient que cela pourrait affecter les performances sur les anciens/systèmes plus lents lors du rendu d'une grande quantité de lignes.

Answer 5

u peut aussi essayer ce code pour ajouter le bouton comme dans votre grille est le code ici:

 new Ext.grid.ColumnModel([ { 
        xtype : 'actioncolumn', 
        header : "Action", 
        items : [ { 
         icon : '../images/enable.png', 
         tooltip : 'Enable App', 
         width : 50, 
         id:'enableAppId', 
         handler : function(grid, rowIndex) { 
          //add code for button click 
         } 
        }] 
        } ] 

) 

j'ai également utiliser cela pour permettre aux données de ligne