Добавить кнопку в сетку в ExtJs

Question

Я очень новый с Extjs. Кто-нибудь знает, как добавить кнопку в каждую строку сетки в Extjs? Просьба привести несколько примеров.

Благодаря

Answer 1

вы должны использовать пользовательские средства визуализации, но я советую вам использовать кнопки на панели инструментов, а не более чистым.

Если вы хотите получить дополнительную информацию, пришлите documentation класса ColumnModel.

в любом случае это дало бы что-то подобное

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

этот фрагмент является экстракт this sample.

Для удобства панели инструментов советую вам просто добавить кнопку на панель инструментов GridPanel и подключить SelectionModel, чтобы вы могли отключить кнопки, когда пользователь не выбирает ни одну строку.

Answer 2

Actualy Ext.Buttons в ячейке строки насколько я могу сказать невозможным с текущей настройкой Ext. Конечно, на самом деле можно отобразить HTML-кнопку в div ячейки, но я думаю, что это будет плохая идея.

Лучше всего реализовать плагин Sights's rowactions, который позволяет легко добавлять кнопки/действия в каждую строку.

http://rowactions.extjs.eu/

Answer 3

Вы можете проверить его здесь, надеюсь, что это помогает!

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

Answer 4

Я хочу добавить дополнительный ответ на этот вопрос, потому что, так как этот вопрос был размещен я создал расширение для компонента сетки ExtJS, что позволяет кнопки для добавления столбцов сетки.

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

Просто надо знать, что это может повлиять на производительность на старых/медленных системах при визуализации большого количества строк.

Answer 5

U также может попробовать этот код для добавления кнопки в виде изображения в сетке здесь есть код:

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

) 

я также использовать эту функцию для включения данных строк