Question

我最近开始学习ExtJS。我创建了一个包含列（名称，电子邮件，电话）的网格，并使用商店添加了一些虚拟数据。此处列 - （＆＃34;名称＆＃34;）是可编辑列。当用户看到该网格时，他应该知道（名称）列是可编辑的。为此，我需要将编辑符号（iconCls：＆＃39; fa fa-edit＆＃39; fontawesome）添加到＆＃34;名称＆＃34;下的每列中的数据的右侧。标题，以便用户可以知道该列是可编辑的。我怎么能实现这一点。请帮助我，我尝试了很多，但没有找到解决方案。谢谢提前。

ExtJS网格代码：

Ext.define（＆＃39; FirstApp.view.main.List＆＃39;，{ 延伸：＆＃39; Ext.grid.Panel＆＃39;， xtype：＆＃39;主列表＆＃39;， 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
    })
]

}）;

refer Grid image with arrowd indication where that editable fontawesome should appear

Answer 1

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

我们要在哪个列中添加编辑图像，该图像位于从商店获取的数据的右侧，以指示它是可编辑的列。 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）。 refer image of grid after changes

如何使用fontawesome＆＃39; fa fa-edit＆＃39;创建ExtJS可编辑网格列指示。

1 个答案: