0

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

“我错过了哪里？。有什么我跳过的吗？还是有什么我没有包括在内的？帮助..”

我使用kitchenSinksencha 提供给我的样本。我试图操纵它并从示例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'));
            }
        }]
    }
]
});
4

1 回答 1

0

我最好的猜测是宽度 - 尝试将其他列设置为 flex 宽度。像这样：

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'));
            }
        }]
    }
]
});
于 2012-10-10T14:23:03.750 回答