Agregar botón a la cuadrícula en ExtJs

Question

Soy muy nuevo con Extjs. ¿Alguien sabe cómo agregar botones a cada fila de grillas en Extjs? Por favor, dame un ejemplo.

Gracias

Answer 1

se debe utilizar un intérprete personalizado pero yo aconsejaría utilizar un botón de la barra en su lugar más limpio.

Si quieres tener más referencias aquí ve el documentation de la clase ColumnModel.

todos modos daría algo por el estilo

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

este fragmento es un extracto de this sample.

Para la barra de herramientas, te lo aconsejo, solo agrega un botón a la barra de herramientas GridPanel y engancha el SelectionModel para poder deshabilitar los botones cuando el usuario no selecciona ninguna fila.

Answer 2

Actualy Ext.Buttons in a row cell es todo lo lejos que puedo decir que es imposible con la configuración actual de Ext. Por supuesto, es posible renderizar el HTML de un botón en el div de la celda, pero en realidad creo que sería una mala idea.

Una mejor manera es implementar el complemento rowactions de Saki, lo que hace que sea muy fácil agregar botones/acciones a cada fila.

http://rowactions.extjs.eu/

Answer 3

Puede verificarlo aquí, espero que ayude!

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

Answer 4

Voy a añadir una respuesta adicional a esta pregunta ya que desde esta cuestión se ha publicado que he creado una extensión para el componente de la red que permite a los botones de ExtJS que se añadirán a las columnas de la cuadrícula.

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

Sólo ten en cuenta que podría afectar a su rendimiento en sistemas antiguos/lentos cuando se representa una gran cantidad de filas.

Answer 5

u también puede probar este código para añadir el botón como imagen en su rejilla de aquí es el código:

 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 
         } 
        }] 
        } ] 

) 

también he utilizar esto para permitir que los datos de fila