【ExtJs 2.2】Ext.form.DisplayField扩展组件:在formpanel中显示html格式的内容

    翻遍所有ExtJs 2.2的form组件,竟没有合适的显示html格式内容的组件,唯有htmleditor组件式用来编辑html格式内容的,但用来显示的话超链接就没法点了,发挥搜索十八般武艺无果。最有自己来改写了一下原来的Ext.form.Field组件变成Ext.form.DisplayField组件(该组件在ExtJs 3.2里默认支持)。

    Ext.form.DisplayField组件源码:



    Ext.form.DisplayField = Ext.extend(Ext.BoxComponent,  {
    
       /**
        * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
        * {tag: "div", style:"overflow-y:scroll;padding:3px 3px 3px 0;"},
        */
       defaultAutoCreate : {tag: "div", style:"overflow-y:scroll;padding:3px;"},
       /**
        * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
        */
       fieldClass : "x-form-field x-form-text",
    
       // private
       isFormField : true,
    
       // private
       hasFocus : false,
    
       // private
       initComponent : function(){
          Ext.form.DisplayField.superclass.initComponent.call(this);
       },
    
       /**
        * Returns the name attribute of the field if available
        * @return {String} name The field name
        */
       getName: function(){
           return this.name;
       },
    
       // private
       onRender : function(ct, position){
          Ext.form.DisplayField.superclass.onRender.call(this, ct, position);
          if(!this.el){
             var cfg = this.getAutoCreate();
             if(!cfg.name){
                cfg.name = this.name || this.id;
             }
             if(this.inputType){
                cfg.type = this.inputType;
             }
             this.name = cfg.name;
             this.el = ct.createChild(cfg, position);
          }
          this.el.addClass([this.fieldClass, this.cls]);
       },
    
       // private
       initValue : function(){
          if(this.value !== undefined){
             this.setValue(this.value);
          }
          // reference to original value for reset
          this.originalValue = this.getValue();
       },
    
       /**
        * Returns true if this field has been changed since it was originally loaded and is not disabled.
        */
       isDirty : function() {
          return false;
       },
    
       // private
       afterRender : function(){
          Ext.form.DisplayField.superclass.afterRender.call(this);
          this.initValue();
       },
    
       // private
       fireKey : Ext.emptyFn,
    
       reset : function(){
          this.setValue(this.originalValue);
       },
    
       isValid : function(preventMark){
          return true;
       },
    
       validate : function(){
          return true;
       },
    
       // protected - should be overridden by subclasses if necessary to prepare raw values for validation
       processValue : function(value){
          return value;
       },
    
       // private
       // Subclasses should provide the validation implementation by overriding this
       validateValue : function(value){
          return true;
       },
    
       /**
        * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
        * @return {Mixed} value The field value
        */
       getRawValue : function(){
          var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
          if(v === this.emptyText){
             v = '';
          }
          return v;
       },
    
       /**
        * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
        * @return {Mixed} value The field value
        */
       getValue : function(){
          if(!this.rendered) {
             return this.value;
          }
          var v = this.el.getValue();
          if(v === this.emptyText || v === undefined){
             v = '';
          }
          return v;
       },
    
       /**
        * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
        * @param {Mixed} value The value to set
        * @return {Mixed} value The field value that is set
        */
       setRawValue : function(v){
          return this.el.dom.value = (v === null || v === undefined ? '' : v);
       },
    
       /**
        * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
        * @param {Mixed} value The value to set
        */
       setValue : function(v){
          this.value = v;
          if(this.rendered){
             this.el.dom.innerHTML = (v === null || v === undefined ? '' : v);
          }
       },
    
       // private
       adjustSize : function(w, h){
          var s = Ext.form.DisplayField.superclass.adjustSize.call(this, w, h);
          s.width = this.adjustWidth(this.el.dom.tagName, s.width);
          return s;
       },
    
       // private
       adjustWidth : Ext.emptyFn
    
    });
    
    Ext.reg('displayfield', Ext.form.DisplayField);
    

    实例的HTML代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Ext.form.DisplayField实例</title>
      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    
      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    
      <script type="text/javascript" src="Ext.form.DisplayField.js"></script>
    </head>
    <body>
    
    <div id="divForm"  style="width:1000px;height:500px;overflow:hidden;"></div>
    
    <script type="text/javascript">
      var fp = new Ext.form.FormPanel({
        title:"表单",
        width:400,
        height:400,
        labelWidth:40,
        bodyStyle:"padding:5px;",
        items:[{
          xtype:"textfield",
          name:"title",
          fieldLabel:"标题",
          anchor:"95%",
          value:"Ext.form.DisplayField实例"
        },{
          xtype:"displayfield",
          name:"content",
          fieldLabel:"内容",
          anchor:"95%",
          height:80,
          value:"<p>该扩展可以帮助在FormPanel中显示HTML形式的内容。</p><p>&nbsp;</p><p><b><a href='http://witmax.cn' target='_blank'>晴枫</a></b></p>"
        },{
          xtype:"displayfield",
          name:"content",
          fieldLabel:"内容",
          anchor:"95%",
          height:80,
          value:"<p>该扩展可以帮助在FormPanel中显示HTML形式的内容。</p><p>&nbsp;</p><p>高度超出设定会出现滚动条</p><p>&nbsp;</p><p>&nbsp;</p><p><b><a href='http://witmax.cn' target='_blank'>晴枫</a></b></p>"
        }]
      });
    
      fp.render("divForm");
    </script>
    </body>
    </html>

    以上实例对应的extjs库位于同级目录下的ext目录,效果如下:

    Ext.form.DisplayField效果实例

    Ext.form.DisplayField效果实例

    组件及实例源码下载请点击ExtJs2.2扩展组件Ext.form.DisplayField源码

    Ext.form.DisplayField组件支持用form的load方法来更新数据。



    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【ExtJs 2.2】Ext.form.DisplayField扩展组件:在formpanel中显示html格式的内容
    标签:
    分享:

还没有人抢沙发呢~

无觅相关文章插件,快速提升流量