ExtJSで楽しくRIA業務アプリ開発

ExtJSのフォームフィールドにHtmleditorが有ります。このHtmleditorフィールドは文字通りTEXTの編集ができるリッチエディタのフィールド作ります。

このフィールドはExt.form.HtmlEditorクラスで定義されています。このクラスはExt.form.Fieldクラスを継承しています、同じサブクラスのExt.form.TextFieldにはallowBlankのコンフィグオプションがありますが、HtmlEditorクラスにはallowblankがないため必須項目にできません。
なんとなく頑張れば出来そうな気もしますが、他の人もきっとつまづいていそうなポイントだと思いフォーラムで解決方法を探してみると、簡単にみつかりました。
やり方はいくつかあるようですが、一番簡単そうなExt.form.HtmlEditorクラスをオーバーライドするを使ってみました。

Ext.form.HtmlEditorクラスをオーバーライドして必須にする
allowBlank:false, on html editor not working ? – Ext JS Forums
http://www.extjs.com/forum/showthread.php?t=37285より
コードはフォーラムのものそのままでは、エラーメッセージが英語なので、
日本語に変更しておきます。以下のコードでオーバーライドします。

    Ext.override(Ext.form.HtmlEditor, {
        markInvalid: function(msg){
            if(!this.rendered || this.preventMark){
                return;
            }
            msg = msg || this.invalidText;
            switch(this.msgTarget){
                case 'qtip':
                this.iframe.qtip = msg;
                this.iframe.qclass = 'x-form-invalid-tip';
                Ext.get(this.iframe).addClass(this.invalidClass);

                break;
            }
            return Ext.form.TextArea.superclass.markInvalid.call(this, [msg]);
        },
        clearInvalid: function(){
            if(!this.rendered || this.preventMark){
                return;
            }
            switch(this.msgTarget){
                case 'qtip':
                    this.iframe.qtip = '';
                    Ext.get(this.iframe).removeClass(this.invalidClass);
                    break;
            }
            return Ext.form.TextArea.superclass.clearInvalid.call(this);
        },
        validateValue:function(){
            if(this.allowBlank==false){
                  var value =this.getRawValue();
                  value = value.replace(/ /gi,"");
                  value = value.replace(/<br>/gi,"");
                  value = value.trim();
                  if(value != ''){
                      this.clearInvalid();
                      return true;
                  }
                  else{
                      this.markInvalid("この項目は必須項目です。")
                          return false;
                  }
            }else{
                this.clearInvalid();
                return true;
            }
        }
    });

このコードをHtmlFieldを使うところに設定しておいてあげれば、allowBlank有効になります。
オーバーライドしたことによりHtmlEditorフィールドの妥当性チェックが有効になったので、送信ボタンをvalidationの状態と連動されることもできるようになります。

今回のフォームのようなよくありそうなつまづきポイントは、フォーラムに既に議論された解決方法が載っている場合がよくあります。本家のフォーラムは英語ではかなりの議論が行われているので、頑張って探してみると意外と良いものが転がっていたりします。

Ext本家のフォーラム(英語)
http://www.extjs.com/forum/