it-roy-ru.com

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

Я очень новый с ExtJS .

Кто-нибудь знает, как добавить кнопку к каждой строке сетки в ExtJS ?

Пожалуйста, дайте мне пример.

Спасибо

12
leejava

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

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

7
Geniet

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

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

http://rowactions.extjs.eu/

6
ChrisR

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

Если вы хотите получить больше ссылок, перейдите в документацию класса 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'
 });

Этот фрагмент является выдержкой из этого образца .

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

4
RageZ

Вы также можете попробовать этот код для добавления кнопки в качестве изображения в вашей сетке, вот код:

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

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

2
Naresh

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

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

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

0
ChrisR