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

Question

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

Используя строку Python , форматирующую (использование str.format () с Python 3.0):

from decimal import Decimal

def format_number(i):
    return '%g' % (Decimal(str(i)))

12

extjs grid

задан Narendra Jadhav 14 April 2018 в 15:48

2 ответа

Другие вопросы по тегам:

extjs grid

Похожие вопросы:

score 4 · Answer 1

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

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

в любом случае будет что-то вроде этого

 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 , чтобы можно было отключить кнопки, когда пользователь не выбирает ни одной строки.

в любом случае будет что-то вроде этого

 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 , чтобы можно было отключить кнопки, когда пользователь не выбирает ни одной строки.

score 6 · Answer 2

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

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

http://rowactions.extjs.eu/