Dodaj przycisk do siatki w ExtJs

Question

Jestem bardzo nowy z Extjs. Czy ktoś wie, jak dodać przycisk do każdego rzędu siatki w ExtJ? Podaj mi przykład.

Dzięki

Answer 1

należy użyć niestandardowego renderujący ale radzę użyć przycisku paska narzędzi zamiast bardziej czyste.

Jeśli chcesz mieć więcej referencji, przyjrzyj się documentation klasy ColumnModel.

zresztą byłoby dać coś takiego

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

ten fragment jest fragmentem this sample.

Dla paska narzędziowego radzę, po prostu dodaj przycisk do paska narzędzi GridPanel i podłącz SelectionModel, aby można było wyłączyć przyciski, gdy użytkownik nie wybierze żadnego wiersza.

Answer 2

Actualy Ext.Buttons w komórce w rzędzie jest tak daleko, jak mogę stwierdzić z aktualnym ustawieniem Ext. Oczywiście istnieje możliwość renderowania kodu HTML przycisku w komórce div, ale uważam, że byłby to zły pomysł.

Lepszym sposobem jest zaimplementowanie wtyczki Saki's rowactions, która bardzo ułatwia dodawanie przycisków/akcji do każdego wiersza.

http://rowactions.extjs.eu/

Answer 3

Można to sprawdzić tutaj, mam nadzieję, że to pomaga!

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

Answer 4

będę dodać dodatkową odpowiedź na to pytanie, bo skoro kwestia ta została zamieszczona Utworzyłem rozszerzenie komponentu siatki ExtJS, który pozwala przyciski mają być dodane do kolumn siatki.

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

Wystarczy mieć świadomość, że może to wpłynąć na wydajność na starszych/wolniejszych systemów podczas renderowania dużą ilość wierszy.

Answer 5

u można także spróbować ten kod na dodanie przycisku jako obraz w siatce tutaj jest kod:

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

) 

mam to wykorzystać również udostępnić dane wierszy