1

我最近开始学习 ExtJS。我创建了一个包含列（姓名、电子邮件、电话）的网格，并使用 store 添加了一些虚拟数据。这里的列 -("names") 是可编辑的列。当用户看到该网格时，他应该知道 (names) 列是可编辑的。为此，我需要在“名称”标题下每列数据的右侧添加编辑符号（iconCls：'fa fa-edit' fontawesome），以便用户知道该列是可编辑的。我该如何实现这一点。请帮助我，我尝试了很多但没有找到解决方案。提前致谢。

ExtJS 网格代码：

Ext.define('FirstApp.view.main.List', { extend: 'Ext.grid.Panel', xtype: 'mainlist', columnLines: true,

requires: [
    'FirstApp.store.Personnel',
    'Ext.grid.filters.Filters'
],

title: 'Personnel',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
resizable: true,
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
stateId: 'stateful-filter-grid',

store: {
    type: 'personnel',
    autoLoad: true,
    autoDestroy: true
},
tbar: [{
    text: 'Show Filters...',
    tooltip: 'Show filter data for the store',
    handler: 'onShowFilters'
}, {
    text: 'Clear Filters',
    tooltip: 'Clear all filters',
    handler: 'onClearFilters'
}],

columns: [
    { text: 'Name',  dataIndex: 'name',flex:1,
        align: 'center',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        },
        filter: {
type: 'string',
    itemDefaults: {
    emptyText: 'Search for...'
} }},
    { text: 'Email', dataIndex: 'email', flex: 1,filter: {
        type: 'string',
        itemDefaults: {
            emptyText: 'Search for...'
        } }},
    { text: 'Phone', dataIndex: 'phone', flex: 1 }
],
selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

});

参考带有箭头指示的网格图像，该可编辑字体应该出现在哪里

4

1 回答 1

0

我找到了解决这个问题的方法。

我们要在从 store 获取的数据的右侧添加编辑图像到哪一列，以表明它是可编辑的列。1）。首先将列设为“widgetcolumn”，然后在网格中进行如下更改：

//网格列代码示例：

columns: [
        { text: 'Name',
            dataIndex: 'name',
            width: 200,
            xtype: 'widgetcolumn',
            cls:'x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small',
            sortable: true,
            widget:{
            textAlign:'left',
                iconCls:'x-fa fa-edit',
                iconAlign: 'right',
                xtype:'button',
                handler: function(btn) {
                    var rec = btn.getWidgetRecord();
                }
            },
            align: 'center',
            editable:true,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            },
            filter: {
    type: 'string',
        itemDefaults: {
        emptyText: 'Search for...'
    } }}]

2）。更改css文件以更改按钮的颜色

.x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small {
    vertical-align: top;
    border-color: transparent;
    background-color: transparent;


}

3）。更改后参考网格图像

于 2017-09-03T11:11:15.213 回答