EXT textfield加入图标（初学有用）

最新推荐文章于 2018-04-25 15:37:17 发布

原创最新推荐文章于 2018-04-25 15:37:17 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #CSS

EXTJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在EXT框架中为文本框添加图标样式，通过定义特定的CSS类并将其应用于文本框组件上实现。

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

EXT 在文本框中加入图标。

定义css：

.login{
	background-image:url(/ExtDwrJson/images/login_user.gif) !important;
	background-repeat:no-repeat;
	background-position:right;
						
}
.password{
	background-image:url(/ExtDwrJson/images/password.gif) !important;
	background-repeat:no-repeat;
	background-position:right;
						
	}

使用css：

{
	xtype:"textfield",
	fieldLabel : "TestCss",
	width : 150,
        cls : "login"
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

czpae86x

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

6、Ext JS开发：表单、按钮、菜单、工具栏与网格数据展示

rrr55的博客

06-26

本博客详细介绍了Ext JS开发中的核心内容，包括表单操作、按钮与菜单的配置和使用、工具栏的设计与实现，以及网格数据展示的强大功能。通过实例代码讲解了表单验证、工具栏元素对齐、图标按钮设置、网格事件处理及高级数据格式化等实用技巧，并结合流程图与示例代码帮助开发者快速掌握界面交互组件的开发方法。无论是初学者还是有一定经验的开发者，都能从中获得构建美观且高效用户界面的实用知识。

mapBox地图的打点聚合，多种图标展示/二、导入json文件，添加镇街图层

m0_60827885的博客

11-04

3416

mapBox地图的打点聚合，多种图标展示

参与评论您还未登录，请先登录后发表或查看评论

ext怎么在textfield后面加一个图标呢

花开的声音

11-27

458

var comNam = new Ext.form.TriggerField({ name : 'comNam', allowBlank: false, blankText:"请点击文本框，进行公司选择", fieldLabel :net.uni.in1.notBlankMark+ '公司名称', readOnly:true, ...

EXT 在文本框中加入图标

hqmln的博客

02-22

269

EXT 在文本框中加入图标。定义css： Js代码 .login{ background-image:url(/ExtDwrJson/images/login_user.gif)!important; background-repeat:no-repeat; background-position:right; } .password{ background-image:url(/ExtDwrJ...

Extjs中TextField中显示图标

chy2z的专栏

04-25

982

实现很简单在TextField的style属性中设置：style: { background: '#ffffff url(pen.gif) no-repeat left center', paddingLeft: '20px' } 就可以了！

让文本框前端出现一个小图标的CSS代码

weixin_30614109的博客

06-20

310

<title>让文本框前端出现一个小图标的CSS代码</title><style type="text/css">.searchBox{background-image:url('/jscss/demoimg/200906/glass.gif');background-repeat:no-repeat;padding-left:20px;}for...

Ext组件说明 Ext组件概述

12-01

### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架，用于构建桌面级Web应用程序。它提供了大量的组件和工具，使得开发者能够快速且高效地构建用户界面。对于初学者而言，理解...

Ext2.0 Form全面实战与控件详解

作者首先介绍了在开始之前导入必要的辅助工具，如Ext.QuickTips.init()，以便于提供控件的提示信息，并设置错误提示的显示位置，通常选择的是'侧'（side），以在控件右侧显示一个图标，鼠标悬停时显示详细错误信息。...

ExtJS4.0 常用操作与开发技巧分享

"EXTJS4.0的常用操作与配置参数详解" EXTJS是一个流行的JavaScript库，主要用于构建富客户端Web应用程序。...这些知识点对于EXTJS的初学者和有经验的开发者都十分有用，可以帮助他们解决实际开发中的各种问题。

ExtJS独立定义组件示例分享

3. Ext.form.TextField: 这是文本输入框组件，用于用户输入。`tfName`变量创建了一个TextField，用户可以在此输入搜索关键字。 4. Ext.Button: 创建了一个按钮组件，`btnSearch`表示搜索按钮。通过`iconCls`设置了...

2、安卓控件 ExitText

长沙火山

03-24

1093

Extjs Form用法详解（适用于Extjs5）

weixin_34311757的博客

09-20

321

Extjs Form是一个比较常用的控件，主要用来显示和编辑数据的，今天这篇文章将介绍Extjs Form控件的详细用法，包括创建Form、添加子项、加载和更新数据、验证等。本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！本文由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefe...

重写ext的TextField控件，增加鼠标悬浮提示和控件后加说明文字

gsyst520的专栏

02-08

3173

在使用ext的过程中，有时需要在TextField后加上说明性文字和鼠标悬浮提示的需求，在网上找到相关资料在整合了下 Ext.override(Ext.form.TextField, { followtext: {text:'',class:''}, //控件后说明内容，可以自己增加项 tooltip: {text:'',title:''}, //鼠标悬浮提示，可

extjs自定义fields图标(尾部)

Wfj521的专栏

12-23

1430

先上图 ext代码{ xtype: 'textfield', fieldLabel: '企业名称', labelAlign: 'right', triggers: {

extjs textfield 显示图标

风声世界的专栏

11-24

2657

<br /> 实现很简单 <br /> 在TextField的style属性中设置：style: { background: '#ffffff url(pen.gif) no-repeat left center', paddingLeft: '20px' } 就可以了！ <br />

ext textfield

最新发布

08-03

Ext JS 是一个用于构建交互式 Web 应用程序的 JavaScript 框架，其 `textfield` 是一个常用的 UI 组件，用于接收用户的文本输入。以下是关于 `textfield` 的使用示例和配置方法： ### 基本用法 `textfield` 是 Ext JS 中 `Ext.form.field.Text` 类的实例，用于创建文本输入框。以下是一个简单的示例： ```javascript Ext.create('Ext.form.Panel', { title: 'Simple Form', bodyPadding: 10, width: 300, items: [{ xtype: 'textfield', name: 'name', fieldLabel: 'Name', allowBlank: false // 不允许为空 }], buttons: [{ text: 'Submit', formBind: true, disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(fp, o) { Ext.Msg.alert('Success', 'Form submitted successfully!'); } }); } } }], renderTo: Ext.getBody() }); ``` ### 配置选项 `textfield` 提供了丰富的配置选项来定制其行为和外观。以下是一些常见的配置选项： - `fieldLabel`: 设置输入框的标签。 - `name`: 设置输入框的名称属性。 - `value`: 设置输入框的初始值。 - `allowBlank`: 设置是否允许输入为空。 - `maxLength`: 设置输入框允许的最大字符数。 - `minLength`: 设置输入框允许的最小字符数。 - `regex`: 设置输入框的正则表达式验证。 - `validator`: 设置自定义验证函数。 ### 事件处理 `textfield` 支持多种事件，可以通过监听这些事件来实现特定的功能。以下是一些常见的事件： - `change`: 当输入框的值发生变化时触发。 - `focus`: 当输入框获得焦点时触发。 - `blur`: 当输入框失去焦点时触发。 - `specialkey`: 当按下特殊键（如回车键）时触发。 ### 示例代码以下是一个示例，展示了如何为 `textfield` 添加事件监听器： ```javascript Ext.create('Ext.form.Panel', { title: 'Text Field Events', bodyPadding: 10, width: 300, items: [{ xtype: 'textfield', name: 'name', fieldLabel: 'Name', listeners: { change: function(field, newValue, oldValue) { console.log('Value changed from "' + oldValue + '" to "' + newValue + '"'); }, focus: function(field) { console.log('Field gained focus'); }, blur: function(field) { console.log('Field lost focus'); } } }], renderTo: Ext.getBody() }); ``` ### 自定义验证除了内置的验证选项外，还可以通过 `validator` 属性实现自定义验证逻辑。以下是一个示例： ```javascript Ext.create('Ext.form.Panel', { title: 'Custom Validation', bodyPadding: 10, width: 300, items: [{ xtype: 'textfield', name: 'email', fieldLabel: 'Email', validator: function(value) { // 简单的电子邮件验证 if (/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(value)) { return true; } else { return '请输入有效的电子邮件地址'; } } }], buttons: [{ text: 'Validate', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { Ext.Msg.alert('Success', 'Form is valid!'); } else { Ext.Msg.alert('Error', 'Form is invalid!'); } } }], renderTo: Ext.getBody() }); ``` 通过以上示例和配置选项，可以灵活地使用 `textfield` 来满足不同的需求。如果您有更多具体的需求或问题，欢迎继续提问。