Sencha Ext JS4 .. [Grid ActionColumn]不显示

Question

我是sencha js 4的新手。我已经按照sencha文档指南关于如何使用actioncolumn的说明，但它不显示在我的格。

“如果我错过了？有什么，我跳过了？或者是有什么，我没有包括在内？帮助..”

我使用kitchenSink样品是煎茶为我提供。我试图操纵它并从网格中的一个kitchenSink样品

在这里，在添加了actioncolumn是我的代码：

Ext.define('PayrollLite.view.GridExample', { 
extend: 'Ext.grid.Panel', 

frame: true, 
width: 1200, 
height: 750, 

store: 'Employees', 

columns: 
[ 
    { text: 'Employee Code', width: '10%', dataIndex: 'EmployeeCode' }, 
    { text: 'Last Name', width: '22%', dataIndex: 'LastName'}, 
    { text: 'First Name', width: '25%', dataIndex: 'FirstName' }, 
    { text: 'Middle Name', width: '15%', dataIndex: 'MiddleName' }, 
    { text: 'Position', width: '15%', dataIndex: 'PositionID', sortable: false }, 
    { 
     xtype:'actioncolumn', 
     width:50, 
     items: [{ 
      icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config 
      tooltip: 'Edit', 
      handler: function(grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Edit " + rec.get('firstname')); 
      } 
     },{ 
      icon: 'extjs/examples/restful/images/delete.png', 
      tooltip: 'Delete', 
      handler: function(grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Terminate " + rec.get('firstname')); 
      } 
     }] 
    } 
] 
}); 

Answer 1

我最好的猜测是宽度 - 尝试设置其他支柱弯曲宽度代替。像这样：

Ext.define('PayrollLite.view.GridExample', { 
extend: 'Ext.grid.Panel', 

frame: true, 
width: 1200, 
height: 750, 

store: 'Employees', 

columns: 
[ 
    { text: 'Employee Code', flex: '1', dataIndex: 'EmployeeCode' }, 
    { text: 'Last Name', flex: '2.2', dataIndex: 'LastName'}, 
    { text: 'First Name', flex: '2.5', dataIndex: 'FirstName' }, 
    { text: 'Middle Name', flex: '1.5', dataIndex: 'MiddleName' }, 
    { text: 'Position', flex: '1.5', dataIndex: 'PositionID', sortable: false }, 
    { 
     xtype:'actioncolumn', 
     width:50, 
     items: [{ 
      icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config 
      tooltip: 'Edit', 
      handler: function(grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Edit " + rec.get('firstname')); 
      } 
     },{ 
      icon: 'extjs/examples/restful/images/delete.png', 
      tooltip: 'Delete', 
      handler: function(grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Terminate " + rec.get('firstname')); 
      } 
     }] 
    } 
] 
});