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

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

Спасибо

ОТВЕТЫ

Ответ 2

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

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

http://rowactions.extjs.eu/

Ответ 3

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

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

этот фрагмент является выпиской этого примера.

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

Ответ 4

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

)

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

Ответ 5

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

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

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