javascript - セルを編集するときにYUIで文字数を表示するにはどうすればよいですか？

Question

YUIデータテーブルで、ユーザーがセルの1つに入力できる文字数を制限したいと思います。フォーマッタを使用して金額を正しく表示する方法を知っていますが、エディタボックスを変更して「124/500」の文字数制限を表示する簡単な方法はありますか？

Answer 1

次のように、カスタム CellEditor を作成し、renderFormメソッドをオーバーライドする必要があります。

(function() {
    var Ylang   = YAHOO.lang,
        Ywidget = YAHOO.widget;

    YAHOO.namespace("yoshi");

    var yoshi = YAHOO.yoshi;

    yoshi.CustomInputText = function(settings) {
        yoshi.CustomInputText.superclass.constructor.call(this, settings);

        this.initializer(settings);
    }

    YAHOO.extend(yoshi.CustomInputText, Ywidget.TextboxCellEditor, {
         _LABEL_CLASS:"yoshi-label",
         min:null,
         max:null,
         initializer:function(settings) {
             this.min = (settings && settings.min) || null;
             this.max = (settings && settings.max) || null;
         },
         renderForm:function() {
             var pElement;
             if(Ylang.isValue(this.min) || Ylang.isValue(this.max)) {
                 pElement = document.createElement("p");

                 var minLabel = "";
                 if(Ylang.isValue(this.min)) {
                     minLabel = "min[" + this.min +  "]";
                 }

                 var maxLabel = "";
                 if(Ylang.isValue(this.max)) {
                     minLabel = "max[" + this.max +  "]";
                 }

                 pElement.innerHTML = minLabel + maxLabel;
                 pElement.className = this._LABEL_CLASS;

                 this.getContainerEl().appendChild(pElement);
             }

             yoshi.CustomInputText.superclass.renderForm.call(this);
         }
    })
})();

カスタムCSSクラスを提供できる特定の_LABEL_CLASSを定義していることに注意してください

.yoshi-label {
    /* Set up custom CSS right here */
}

列設定を作成するとき

var yoshi = YAHOO.yoshi;

editor:new yoshi.CustomInputText({min:124,max:500});