In the YUI datatable I want to limit the number of开发者_运维技巧 characters a user can type into one of the cells. I know how to properly display the amount using a formatter, but is there a simple way to change the editor box to show a "124/500" character count limit?
You must create a custom CellEditor and override renderForm method as follow
(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);
}
})
})();
Notice i define a specific _LABEL_CLASS where you can supply a custom CSS class
.yoshi-label {
/* Set up custom CSS right here */
}
Now when create a column settings
var yoshi = YAHOO.yoshi;
editor:new yoshi.CustomInputText({min:124,max:500});
精彩评论