Ext.form.field.Trigger自定义按钮样式及背景图

最新推荐文章于 2021-10-25 13:30:44 发布

jwl_yifeng

最新推荐文章于 2021-10-25 13:30:44 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ext-4.1.0-beta-1 文章标签： ExtJs trigger 自定义按钮

本文链接：https://blog.youkuaiyun.com/jiawenlong_/article/details/10605749

ext-4.1.0-beta-1 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在ExtJS中定制触发器字段(triggerfield)，包括引入trigger、自定义样式及重要属性配置。通过实例展示了如何设置触发器样式、点击事件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入trigger

id:'dataValue',
            header: '变量值标签',
            dataIndex: 'data',
            width: 105,
            editor: {
               xtype: 'triggerfield',
               triggerCls:'x-form-my-trigger',
                id:'datas',
                editable: false,
                onTriggerClick: openWin
            }

2、引入样式：

.x-form-my-trigger {
background-image: url(images/form/test.gif) !important;
}

图片和其他样式可以自定义，注意，一定要加上边红色的部分，如果不加程序会自动引用ext-all.js中的样式；

3、.trigger几个比较重要的属性

　　triggerCls：文本框右侧的按钮样式，主要有4种　　

x-form-clear-trigger     // the X icon  
x-form-search-trigger    // the magnifying glass icon  
x-form-trigger           // the down arrow (default for combobox) icon  
x-form-date-trigger      // the calendar icon (just in case)

　　onTriggerClick：单击右侧按钮的事件

　　emptyText：值为空时候显示的文字

　　hideTrigger：是否显示触发按钮