方法:覆盖actioncolumn类,修改代码
Ext.define('ActionTextColumn', {
extend: 'Ext.grid.column.Action',
alias: ['widget.actiontextcolumn'],
constructor: function(config) {
var me = this,
cfg = Ext.apply({}, config),
items = cfg.items || [me],
l = items.length,
i,
item;
delete cfg.items;
me.callParent([cfg]);
me.items = items;
me.renderer = function(v, meta) {
v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < l; i++) {
item = items[i];
item.disable = Ext.Function.bind(me.disableAction, me, [i]);
item.enable = Ext.Function.bind(me.enableAction, me, [i]);
/*v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';*/
v += '<a href="javascript:void(0);"' +
' class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.cls || '') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + '>' + (item.text || me.text) + '</a>';
}
return v;
};
}
});
分享到:
相关推荐
就是extjs4里面,想给grid里面一格中,文字后面加个小图标。 因为俺们项目就只是文字+图标,所以俺就没有复写Actioncolumn,而是从Column下面继承了一下。。 包含自定义插件源码、效果图等等。
NULL 博文链接:https://xiaomy.iteye.com/blog/2280263
ExtJS 4提供了响应式布局支持,确保图标在不同设备上都能正确显示。 7. **无障碍性**: - 符号图标应与文本标签一起使用,以确保屏幕阅读器和其他辅助技术能够理解它们的含义,提升应用的无障碍性。 8. **性能...
ExtJS图标大全是一个集合了多种图标的资源库,特别适合用于Web开发,尤其是使用ExtJS框架构建用户界面时。ExtJS是一款强大的JavaScript UI框架,它提供了丰富的组件和工具,帮助开发者构建功能丰富的、响应式的Web...
"extjs小图标(项目小图标大全)"这个资源集合了5000个专门用于ExtJS项目的图标,为开发者提供了广泛的选择,以满足不同设计需求。 这些小图标通常以SVG或PNG格式提供,因为这两种格式支持多种分辨率和设备,能够确保...
在easyUI中,图标通常通过CSS类来引用,这些类名与图标相对应,开发者只需在HTML元素上添加相应的class即可显示图标。例如,如果你想在按钮上显示一个保存图标,可以使用类似于`保存</button>`的代码。同样,在EXTJS...
16x16像素的大小也符合许多设计规范,确保在不同设备和分辨率下都能显示得体。 在Web开发中,图标素材通常以SVG(Scalable Vector Graphics)或PNG格式提供,SVG支持矢量图形,可以在任何尺寸下保持清晰,而PNG则...
在实际应用中,使用这些图标的方法通常有以下几种: 1. CSS类引用:图标可能以CSS背景图像的形式提供,通过类名应用到HTML元素上。例如,`保存</button>`,其中`icon-save`是一个预定义的CSS类,它设置按钮的背景...
在EXTJS项目中,图标扮演着重要的角色,它们不仅可以提升用户界面的视觉吸引力,还能帮助用户快速识别和理解功能。 标题 "EXTJS 项目图标" 指的是EXTJS框架中专门用于项目的各种图标集合。这通常包括一系列预定义的...
4. **自定义图标**:如果你发现标准的bug图标无法满足需求,可以考虑创建自定义图标。这可能涉及设计新的图像,将其转换为适当的格式(如SVG),然后在项目中添加相应的CSS规则。 5. **无障碍性**:确保图标具有...
综上所述,"extjs小图标大全小图标"这个资源为ExtJS开发者提供了一站式的图标解决方案,使他们能够在项目中轻松集成和使用各种图标,提升应用的视觉效果和用户体验。通过合理使用和适配,这些图标可以成为构建高质量...
"ExtJs实用图标大全"包含了近千个专为ExtJs设计的小图标,尺寸为16x16像素,这种小尺寸的图标设计旨在确保在不同分辨率和屏幕尺寸下都能清晰可见。这些图标涵盖了各种常见功能和操作,如编辑、保存、删除、刷新、...
`Ext.MessageBox.show()`是ExtJS提供的一种显示对话框的方法,其中包括一个进度条选项,这使得它非常适合用来显示任务的进度。例如,在代码片段中,我们首先创建了一个带有进度条的对话框: ```javascript var ...
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
与ExtJS类似,EasyUI也包含了一套丰富的图标集合,开发者可以通过设置特定的CSS类来显示图标。这些图标常用于导航栏、表单按钮或其他需要视觉提示的地方。 在“extjs easyui小图标”这个主题中,我们可以学习以下几...
extjs4.0 实现桌面图标换行,具体改动参考 4.0.2a\examples\desktop\App.js 核心方法参考这句 //这里初始化所有图标 this.initShortcut(); 我觉得我说的很清楚了,还不明白的留言,一点js不懂的请闪开,谢谢
ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...