`
rain_2372
  • 浏览: 682338 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Extjs中如何在一行textfield后面加几个字

阅读更多
{
fieldLabel : '输入框',
xtype : 'textfield',
anchor : '80%',
listeners: {
       render: function(obj) {
       var font=document.createElement("font");
font.setAttribute("color","red");
var redStar=document.createTextNode('后面的字');
font.appendChild(redStar);   
obj.el.dom.parentNode.appendChild(font);
     }
     }
}

第二种方案,可以解决错误提示和后面文字重叠问题:
Extjs.form.TextField的默认在输入框后面是不能加入文字。在网上找到此方法以备查用。
在页面中引入此段js代码
Ext.override(Ext.form.TextField, {  
              unitText : '',  
              on



<div class="bct fc05 fc11 nbw-blog ztag js-fs2">
 
 
 
Render : function(ct, position) {  
            Ext.form.TextField.superclass.onRender.call(this, ct, position);  
                // 如果单位字符串已定义 则在后方增加单位对象  
            if (this.unitText != '') {  
              this.unitEl = ct.createChild({  
                tag : 'div',  
                html : this.unitText  
             });  
              this.unitEl.addClass('x-form-unit');  
                  // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况  
              this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);  
                  // 同时修改错误提示图标的位置  
              this.alignErrorIcon = function() {  
              this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);  
              };  
            }  
              }  
        })  
再加入些样式
 
 
 
  <style>
        .x-form-unit {  
            height: 22px;  
            line-height: 22px;  
            padding-left: 2px;  
            display: inline-block;  
            display: inline;  
        } 
    </style>



</div>

转:http://my.oschina.net/tiancai/blog/93635
分享到:
评论

相关推荐

    ExtJs5 去掉textfield边框

    在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的配置项和CSS样式,可以成功移除这些边框。 首先,让我们详细了解一下如何在ExtJs5中配置`...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    学习ExtJS TextField常用方法

    ExtJS 是一个基于 JavaScript 的富互联网应用程序框架,提供了许多实用的控件和方法来帮助开发者快速构建高质量的 Web 应用程序之一就是 TextField,在本文中,我们将详细介绍 ExtJS TextField 的常用方法和属性。...

    EXTJS单元格变色、行变色

    EXTJS是一个功能强大且流行的JavaScript框架,用于构建复杂的Web应用程序。其中,Grid Panel是EXTJS中最常用的组件之一,用于展示和编辑数据。本文将详细介绍EXTJS实现单元格变色、行变色的方法。 单元格变色 在...

    extjs 5 textfield 金额控件扩展

    在EXTJS 5中,开发人员经常会遇到需要创建专门用于输入金额的文本字段控件,以便用户能够方便、准确地输入货币数据。EXTJS 5 Textfield 金额控件扩展就是为了满足这一需求而设计的。这个扩展提供了一个专门的组件,...

    extjs中文文档大全

    ExtJS是一种基于...总而言之,这三份文档为开发者提供了一个全面的ExtJS学习资源库,无论你是初学者还是经验丰富的开发者,都能从中受益。深入理解和熟练运用这些知识,将使你在构建现代Web应用时更加得心应手。

    extjs加水印

    在IT行业中,尤其是在开发Web应用时,安全性是一个至关重要的议题。"extjs加水印"这一主题涉及到如何在EXTJS框架构建的系统中添加水印功能,以增强数据的安全性,防止敏感信息非法传播。EXTJS是一个强大的JavaScript...

    extjs四个例子,一个中文API

    新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API

    给Extjs的GridPanel增加“合计”行

    - 定义一个合计行的模板,可以使用EXTJS的XTemplate。模板中包含合计值的占位符,这些占位符将在数据计算完成后被替换为真实的合计值。 4. **插入合计行到DOM**: - 在自定义View的`onRender`方法中,找到...

    ExtJs 动态添加表单

    在ExtJS中,我们可以使用`Ext.container.Container`类来创建一个容器,然后设置布局为`form`,以便容纳表单字段。例如: ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    ExtJS改变默认字体大小的几种方式

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件库,包括按钮、表格、窗口等,使得开发者可以构建出具有复杂交互和美观界面的应用。在使用ExtJS时,有时我们需要根据用户需求或...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    extjs form textfield的隐藏方法

    在ExtJS中,要隐藏一个表单中的textfield,可以通过在该表单项的配置中添加hidden属性,并将其设置为true,这样可以使得该表单项不在界面上直接显示。但是,如果仅仅设置了hidden属性为true,虽然文本字段本身不会...

    extjs中本地照片预览、blob数据在oracle中存取

    并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据,显示在extjs页面) 没有完全实现的是extjs用uploadfild...

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    ExtJs消息提示框

    在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...

Global site tag (gtag.js) - Google Analytics