5.Ext JS actioncolumn动态加载图标/提示

5.1.1 Ext JS之Grid actioncolumn动作列的动态显示 在Ext JS 的 Grid中添加动作列的方式是配置一个 actioncolumn类型的动作列,这个动作列可以包含多个图表的按钮。在有的时候场景中, 会根据不同行的数据来决定是否显示动作按钮, 也就是最后的效果是:有点行出现动作按钮,有的列不出现动作按钮。显示的效果如下图: 阅读详情

官网介绍

图标加载

getClass : Function  

    A function which returns the CSS class to apply to the icon image.  

    Parameters  
        v : Object  
        The value of the column's configured field (if any).  

        metadata : Object  
        An object in which you may set the following attributes:  

            css : String  
            A CSS class name to add to the cell's TD element.  

            attr : String  
            An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').  

        r : Ext.data.Model  
        The Record providing the data.  

        rowIndex : Number  
        The row index.  

        colIndex : Number  
        The column index.  

        store : Ext.data.Store  
        The Store which is providing the data Model.  

提示加载

getTip : Function

A function which returns the tooltip string for any row.
Parameters

    v : Object
    The value of the column's configured field (if any).

    metadata : Object
    An object in which you may set the following attributes:

        css : String
        A CSS class name to add to the cell's TD element.

        attr : String
        An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').

    r : Ext.data.Model
    The Record providing the data.

    rowIndex : Number
    The row index.

    colIndex : Number
    The column index.

    store : Ext.data.Store
    The Store which is providing the data Model.


项目实战

text : "操作",
xtype:'actioncolumn',
sortable : false,
width : 190,
items : [{
	handler : "projectFavorite",
	name : 'projectFavorite',
	getClass : function (v, metadata, r, rowIndex, colIndex, store) {
		if (me.userType == '20') {
			if (r.data.partaked){ 
				return "x-item-disabled x-fa fa-heart";
			} else {
				return r.data.favorite == true ? "x-fa fa-heart" : "x-fa fa-heart-o";
			}
		}
	},
	getTip : function (v, metadata, r, rowIndex, colIndex, store) {
		if (me.userType == '20') {
			return r.data.favorite == true ? "取消关注" : "关注";
		}
	}
}]


EXTJS 项目图标 EXTJS项目图标,共1001个文件,从此找图标不用愁了 立即下载

相关推荐

EXTJS4 Actioncolumn不能使用文字的部分解决办法

就是extjs4里面,想给grid里面一格中,文字后面加个小图标。 因为俺们项目就只是文字+图标,所以俺就没有复写Actioncolumn,而是从Column下面继承了一下。。 包含自定义插件源码、效果图等等。

ExtJs actioncolumn根据grid数据动态显示按钮

需求通过不同行的不同数据状态决定进行相应的操作方法通过getClass方法可以获取到,当前行的数据,根据指定字段的值可以判断设置按钮的显示或隐藏。 return的是类名。需提前定义,在类中进行相应的背景图片以控制不用的图片控制。代码{ text: '操作', xtype: 'actioncolumn',

idomyway的博客 2521

EXTJS 带文字和图标的action column

NULL 博文链接:https://xiaomy.iteye.com/blog/2280263

ExtJS4 actioncolumn动态显示图标

今天做ExtJS时有这么一个需求,在一个gridpanel中用到actioncolumn,但actioncolumn中的items不是全部显示的,而是根据store里的data动态显示,比如说账号管理,一个账号有几种状态,那么显示的图标就不一样了,而我想到的一个做法就是,在actioncolumn下的items里把所有状态的图标都定义出来,然后根据每一个record的数据的状态来显示和隐藏,但却无

黄绍添的个人博客 9386

Android 导出aar 用于Unity 百度语音唤醒

AndroidStudio版本下载地址Android Studio Arctic Fox Unity版本2021.3.26f1c1 新建AndroidStudio工程 新建module 这里注意一下,网上很多教程说要注意包名要和unity一样,但是测试下来,不一样也可以的 在新建的module里添加这两个jar包,并点击右键add as library 导入jniLibs 右键创建这几个package 代码就安装这个大佬的写参考代码 需要注意的的是在WakeupListener脚本里U

weixin_38777563的博客 633

ESP32-CAM与Thonny的完美搭配:从烧录到通信的完整流程

本文详细介绍了如何将ESP32-CAM与Thonny IDE完美结合,从固件烧录到通信测试的完整流程。通过硬件连接、MicroPython固件烧录、Thonny环境配置以及摄像头功能开发等步骤,帮助开发者快速搭建高效的物联网开发环境,实现图像采集与无线通信功能。

tomato的博客 1122

Extjs4 GridPanel 加载从数据库读取图片(双击图片放大)

Extjs4 GridPanel 加载从数据库读取图片(双击图片放大),学习Extjs4框架知识,一点学习积累 每天进步一点点-----

zhizhuomsj 4845

Python爬虫实战:如何高效抓取拼多多商品信息、销量与价格数据,破解反爬虫挑战

**摘要:**本文介绍利用Python爬虫技术抓取拼多多商品数据(价格、销量等)的方法与应用价值。通过分析拼多多商品页面的HTML结构,使用Requests和Selenium获取数据,并应对反爬虫机制(IP代理、请求头伪装等)。数据可存储于MongoDB或CSV用于市场监控、竞品分析等场景。文章涵盖技术选型、实战代码示例及反爬策略,为电商数据分析提供实用指导。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 1673

Extjs actioncolumn动态显示按钮

通过getClass方法可以获取到,当前行的数据,根据指定字段的值可以判断设置按钮的显示或隐藏。{ text: '操作', xtype: 'actioncolumn', align: 'center', menuDisabled:true, flex:0.5, items:[{ tooltip: '查询', getClass : function (v, m

Tracycater的专栏 4279

DirectX修复工具使用技巧之二——手动修复C++创建失败的文件

最后更新:2021-2-25 随着V4.0正式版的发布,近来有部分用户来咨询如何解决C++文件创建失败的问题。在此我将以解决最常见的C++2015-2019文件创建失败为例,向大家演示一下在线修复的方法,其他C++或文件的方法大同小异。此次操作以Windows 7为例,其他系统相应参考即可。 首先,如果希望程序能手动在线修复创建失败的失败,请首先确定您使用的V4.0.2版或更高版本,老版本不支持此功能。查看程序版本的方式可以把鼠标放在DirectX Repair.e...

VBcom的专栏 6万+

手把手教你用树莓派蓝牙抓取小米温湿度计2代数据,接入HomeAssistant(附密钥获取避坑指南)

本文详细介绍了如何通过树莓派蓝牙抓取小米温湿度计2代数据并接入HomeAssistant的完整流程。重点解析了获取32位加密密钥的三种方法,包括使用Telink Flasher工具、米家APP抓包和开源工具ATC_MiThermometer,并提供了HomeAssistant集成配置和常见问题排查指南,帮助用户实现稳定可靠的温湿度监测。

一名菜鸟攻城师 779

ExtJS中表格控件的使用,属性设置和数据的获取

ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore… 一个表格的基本编写过程: ...

Follow heart 404

别再手动配IP了!保姆级教程:用Cisco Packet Tracer搞定DHCP服务器配置(附实验抓包分析)

本文提供了一份详细的Cisco Packet Tracer DHCP服务器配置教程,帮助用户告别手动分配IP的繁琐过程。通过构建多子网实验环境,逐步指导DHCP地址池设置、客户端测试及协议分析,并分享常见问题排查技巧,让网络配置更高效、更智能。

weixin_42535461的博客 339

ExtJS 4 动态加载的演示例子

官方提供四个围绕于Ext JS类加载机制的例子供大家演示 、下载 (例子已汉化),起初页面加载的只是基本调用的代码,而实际的代码必须经过动态请求从服务端获取回来。运行这些例子都需要事前部署在服务器之上才可以,不用动态的服务器亦可,并且建议读者在测试例子的同时打开您的Firebug一边运行程序,一边留意AJAX是如何从服务端哪里加载文件的,从第一个例子的一份文件到第四例子的六分文件的情形都有。

zhangxin09的专栏 1万+

华为OD机考双机位C卷:精准核酸检测 (C/C++/Py/Java/Js/Go)

华为OD机试双机位C卷 精准核酸检测,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解。华为OD机试 - 精准核酸检测。

qq_45776114的博客 1729

Arduino开发实例-EMG 肌肉信号传感器

在医学研究中,测量肌肉的活动、收缩和扩张非常重要。 EMG 肌肉传感器测量肌肉活动并产生信号以显示扩张和收缩量。 因此,输出取决于所选肌肉的活动量。 3 绿色、红色和黄色电极连接到模块,用于传输来自肌肉运动的电信号。

视觉与物联智能 1698

extjs4如何让actioncolumn的操作按钮动态隐藏?

如下: getClass : function(v, metadata, record){ if(record.data.vstatus != 2){ return 'x-hidden'; } }, 全部代码如下: /**  * @author suyuyuan  * @view  * 执法审批-矫正解除-迁居迁出 列表  *   */ Ext.defin

看不过的黑工坊 3573

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Ext.js 为grid表格添加按钮操作列

Ext.js 为grid表格添加按钮操作列

qq_43077983的博客 2147

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

【ExtJs】表格控件Grid的增删改查,利用renderer让操作列actioncolumn使用文字而不是图标

在《【ExtJs】与后台数据库交互的带分页表格组件grid的查询》(点击打开链接)中介绍了Grid控件是怎么分页显示的。再加上对此控件内的数据的增加、删除、修改,就真的是大功告成了。此控件的排序,应该在后台的数据库查询语句中增加一条order by语句即可,前台的排序在分页之后,仅能对当前页进行排序,没有什么意义。下面举一个例子来说明,如果对ExtJs的表格控件Grid进行增删改查 一、

编程记录,亲测有效 7987

Extjs Grid ActionColumn 操作按钮

最近项目使用Ext,其中Grid的操作列使用了扩展Ext.ux.grid.RowActions,但在IE下有点问题,单击按钮时,不会自动选中该行,能正确触发事件,其实也不会是问题。 今天偶然发现原来Ext中就有一个叫Ext.grid.ActionColumn的列类型。看了下与RowActions很相似,但只能显示图标且不接受iconCls,只接受图片路径,于是把RowActions的搬了来过...

w_pingfan的专栏 916

Extjs4 中使用actioncolumn 显示表格的操作列

      Ext.grid.column.Action 是 Ext.grid.column.Column的子类,用来在Grid的单元格里渲染一个或多个图标。 每个图标均可自定义点击处理事件。 var store = Ext.create('Ext.data.Store',{ fields:['userName','loginName'], data:[{userName:"...

summitfly的专栏 1496

JS快速删除数组中制定元素

var ary = ['123','234','345']; var idx = ary.indexOf('234'); var end = ary.splice(idx, 1); console.log(end); console.log(ary);

InforStack 1万+
上一篇: oracle查看/修改最大连接数和当前连接数/用户等信息
下一篇: MBaen+Timer=减少数据库调用
InforStack
博客等级 码龄12年 23粉丝 115原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值