Extjs 带数字的图标或按钮

ExtJS 提供了许多内置的图标和按钮，您可以通过配置图标的 cls 属性来设置自定义图标。以下是一个带数字的按钮示例：

Ext.create('Ext.Button', {
    text: 'My Button',
    cls: 'my-button-icon', // 设置自定义图标样式
    badgeText: '10', // 设置数字
    renderTo: Ext.getBody()
});

然后在 CSS 文件中定义图标样式：

.my-button-icon:before {
    content: '\e602'; /* 设置 Unicode 编码 */
    font-family: 'FontAwesome'; /* 设置字体 */
    margin-right: 5px; /* 设置图标和文本之间的间距 */
}

此示例使用了 FontAwesome 图标库，您可以使用其他图标库或自己的图标。通过设置 badgeText 属性，您可以在按钮旁边添加一个数字。

相关问题

extjs表格标题行添加按钮

您可以通过以下代码实现在 ExtJS 表格标题行添加按钮：

{
    xtype: 'gridcolumn',
    text: '操作',
    width: 100,
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        return '<button>按钮</button>';
    }
}

这样就可以在表格的标题行中添加一个按钮了。

extjs绑定每行删除按钮的代码

以下是绑定每行删除按钮的代码示例：

Ext.create('Ext.grid.Panel', {
    store: store,
    columns: columns,
    renderTo: Ext.getBody(),
    listeners: {
        itemclick: function(view, record, item, index, e) {
            if (e.target.className == 'delete-button') {
                store.remove(record);
            }
        }
    },
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return 'delete-button';
        }
    }
});

这段代码可以实现在 ExtJS 表格中为每一行添加一个删除按钮，并且点击该按钮可以删除对应的行数据。