Question

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

“我在哪里错过了？有什么我跳过的吗？或者有什么东西我没有包括在内？帮助..”

我使用了sencha为我提供的kitchenSink示例。我试图操纵它并从actioncolumn示例中的一个网格中添加kitchenSink

这是我的代码：

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

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

1 个答案: