Как показать количество символов в YUI при редактировании ячейки? - PullRequest
Новая
       14

Как показать количество символов в YUI при редактировании ячейки?

1 голос
/ 10 сентября 2010

В таблице данных YUI я хочу ограничить количество символов, которое пользователь может ввести в одну из ячеек.Я знаю, как правильно отображать сумму с помощью средства форматирования, но есть ли простой способ изменить окно редактора, чтобы отобразить ограничение числа символов «124/500»?

1 Ответ

2 голосов
/ 16 сентября 2010

Вы должны создать пользовательский 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);
         }
    })
})();

Обратите внимание, что я определил определенный _LABEL_CLASS, где вы можете предоставить собственный класс CSS 

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

Теперь при создании настроек столбца 

var yoshi = YAHOO.yoshi;

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