Thêm nút vào lưới trong ExtJs

Question

Tôi rất mới với Extjs. Có ai biết cách thêm nút vào mỗi hàng lưới trong Extjs không? Xin vui lòng cho tôi một số ví dụ.

Cảm ơn

Answer 1

bạn nên sử dụng trình kết xuất tùy chỉnh nhưng tôi khuyên bạn nên sử dụng nút thanh công cụ để thay thế sạch hơn.

Nếu bạn muốn tham khảo thêm tại đây, hãy đến số documentation của lớp ColumnModel.

anyway nó sẽ cung cấp cho một cái gì đó như thế

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

đoạn này là một trích this sample.

Đối với cách thanh công cụ tôi khuyên bạn, chỉ cần thêm nút vào thanh công cụ của GridPanel và móc SelectionModel để bạn có thể tắt các nút khi người dùng không chọn bất kỳ hàng nào.

Answer 2

Actualy Ext.Buttons trong một ô hàng là như xa như tôi có thể nói không thể với thiết lập hiện tại của Ext. Ofcourse nó thực sự có thể làm cho HTML của một nút trong div của tế bào nhưng tôi thực sự nghĩ rằng đó sẽ là một ý tưởng tồi.

Cách tốt hơn là triển khai plugin hàng hóa của Saki, giúp bạn dễ dàng thêm các nút/hành động vào mỗi hàng.

http://rowactions.extjs.eu/

Answer 3

Bạn có thể xem tại đây, hy vọng điều đó sẽ hữu ích!

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

Answer 4

Tôi sẽ thêm một câu trả lời thêm cho câu hỏi này bởi vì kể từ khi câu hỏi này đã được đăng tôi đã tạo một phần mở rộng cho thành phần lưới ExtJS cho phép các nút được thêm vào các cột lưới.

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

Chỉ cần lưu ý rằng nó có thể ảnh hưởng đến hiệu suất trên hệ thống cũ/chậm hơn khi vẽ một lượng lớn hàng.

Answer 5

u cũng có thể thử mã này cho nút thêm như hình ảnh trong mạng lưới của bạn ở đây là mã:

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

) 

tôi cũng đã sử dụng này cho phép các dữ liệu hàng