Extjs散记

在元素的后面添加文字，如 汇率：_____%

 

{

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>