ExtJS 4 - пометьте красную звездочку в обязательном поле
У меня есть эта проблема, где мне нужно добавить красную звездочку рядом с fieldLabel когда поле помечено как "обязательное" (или allowBlank: false)
В ExtJS3 мы можем легко получить этот хак, переопределив Ext.layout.FormLayout следующим образом:
Ext.override(Ext.layout.FormLayout, {
getTemplateArgs: function(field) {
var noLabelSep = !field.fieldLabel || field.hideLabel;
var labelSep = (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator);
if (!field.allowBlank) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
return {
id: field.id,
label: field.fieldLabel,
labelStyle: field.labelStyle||this.labelStyle||'',
elementStyle: this.elementStyle||'',
labelSeparator: noLabelSep ? '' : labelSep,
itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
clearCls: field.clearCls || 'x-form-clear-left'
};
}
});
Но это невозможно в ExtJS4. FormLayout больше не применимо, а метки фактически отображаются Ext.form.field.Base используя миксин под названием Ext.form.Labelable,
К сожалению, ни расширение Ext.form.Labelable или переопределение Ext.form.Labelable это выполнимо для меня. Расширенные компоненты из Ext.form.field.Base не получает никакого эффекта от этого. Даже если я поменяю местами миксины, шаблоны все равно не будут работать.
Итак, вот мое решение, где я сделал очень резкое переопределение Ext.form.field.Base и это работает следующим образом ( посмотрите мой пример)
Это только для ExtJS 4.0.7. Чтобы использовать его на ExtJS 4.0.2a, вам нужно изменить labelableRenderTpl в соответствии с найденным в 4.0.2a /src/form/Labelable.js
(function() {
var overrides = {
labelableRenderTpl: [
'<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
'<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'<tpl if="!allowBlank"><span style="color:red">*</span></tpl>',
'</label>',
'</tpl>',
'<div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation">{subTplMarkup}</div>',
'<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
'<div class="{clearCls}" role="presentation"><!-- --></div>',
{
compiled: true,
disableFormats: true
}
],
/**
* @protected
* Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
* @return {Object} The template arguments
*/
getLabelableRenderData: function() {
var me = this,
labelAlign = me.labelAlign,
labelCls = me.labelCls,
labelClsExtra = me.labelClsExtra,
labelPad = me.labelPad,
labelStyle;
// Calculate label styles up front rather than in the Field layout for speed; this
// is safe because label alignment/width/pad are not expected to change.
if (labelAlign === 'top') {
labelStyle = 'margin-bottom:' + labelPad + 'px;';
} else {
labelStyle = 'margin-right:' + labelPad + 'px;';
// Add the width for border-box browsers; will be set by the Field layout for content-box
if (Ext.isBorderBox) {
labelStyle += 'width:' + me.labelWidth + 'px;';
}
}
return Ext.copyTo(
{
inputId: me.getInputId(),
fieldLabel: me.getFieldLabel(),
labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls,
labelStyle: labelStyle + (me.labelStyle || ''),
subTplMarkup: me.getSubTplMarkup(),
allowBlank: me.allowBlank
},
me,
'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
true
);
}
};
//Both field.Base and FieldContainer are affected, so need to cater for.
Ext.override(Ext.form.field.Base, overrides);
Ext.override(Ext.form.FieldContainer, overrides);
})();
И поэтому у меня есть хорошая звездочка, добавленная во все обязательные поля.
Вопрос в том, есть ли более простой способ добиться чего-то подобного? Переопределение довольно резкое, лучше всего, если мы можем использовать миксины, но миксины не могут переопределить поведение
Заметка
Причина этого заключается в том, что у меня есть настраиваемые поля, которые нужно было расширить от базы Text, Combo, FieldContainer, Миксины в расширенном поле даже не связываются с шаблоном. Они просто слишком упрямы. Возможно, лучший способ на данный момент - переопределить базовый класс... Посмотрите рабочий пример
11 ответов
У меня есть немного более короткое решение. Я предлагаю использовать событие 'beforeadd' формы так:
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
initComponent: function() {
this.on('beforeadd', function(me, field){
if (!field.allowBlank)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});
this.callParent(arguments);
}
});
Вот демо
Вы все еще можете переопределить компонент макета, подобный плюшке extjs3, учитывая, что там нет fieldLayout, я переопределил Ext.layout.Layout, Это очень похоже на решение молекулы человека, но оно более общее. Работа с полями, используемыми в других контейнерах, кроме форм.
Ext.override(Ext.layout.Layout, {
renderItem: function(item, target, position) {
if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) {
item.fieldLabel += ' <span class="req" style="color:red">*</span>';
}
this.callOverridden(arguments);
}
});
Это проще, чем ваше решение, но не обязательно лучше, например, здесь также используется в наборах полей
Для Ext JS 4.1.1 это работает:
Ext.define('com.ideas.widgets.Base', {
override : 'Ext.form.field.Base',
initComponent : function()
{
if(this.allowBlank!==undefined && !this.allowBlank)
{
if(!this.labelSeparator)
{
this.labelSeparator = "";
}
this.labelSeparator += '<span style="color:red">*</span>';
}
this.callParent(arguments);
}
});
Вы также можете переопределить и ничего не расширять и просто создать действие контроллера следующим образом:
Ext.define('MyApp.controller.MyForm', {
extend: 'Ext.app.Controller',
markMandatoryFields: function(field, options) {
if (field && field.isFieldLabelable && field.fieldLabel && field.allowBlank == false) {
field.fieldLabel += ' <span class="req" style="color:red">*</span>';
}
},
init: function() {
this.control({
"field": {
beforerender: this.markMandatoryFields
}
});
}
});
Подход, который вы можете найти более элегантным, - это добавление класса css к любой метке поля, помеченной allowBlank=false и стиль вашего обязательного индикатора в CSS.
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
listeners: {
'beforeadd': function(){
if (!field.allowBlank) {
field.labelClsExtra = 'x-required';
}
}
}
});
Затем вы можете стилизовать вашу метку поля в CSS с помощью :after псевдо утилита:
.x-required:after {
content: ' *';
color: red;
font-weight: bold;
}
Extjs 4.1
Когда у поля есть fieldLabel, используйте:
fieldLabel: 'Name',
allowBlank: false,
afterLabelTextTpl: "<span style="color:red;font-weight:bold" data-qtip="Required">*</span>"
Если у поля нет fieldLabel, используйте комбинацию параметров конфигурации, конфигурация hideLabel должна быть ложной:
//hideLabel: false
name: 'lastName',
emptyText: "Last Name",
allowBlank: false,
labelWidth: 0,
fieldLabel: '',
hideEmptyLabel: false,
afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'
Кроме того, вы можете смешать это решение с плагином Drasill и иметь простой способ настроить все поля одновременно.
Я сделал плагин для этого.
Работает этот ExtJS 4.1 (как минимум).
Используйте, если это так:
Ext.create('Ext.form.Panel', {
...
plugins : "formlabelrequired"
...
});
Или настроить "звездочку":
Ext.create('Ext.form.Panel', {
...
plugins : [{ptype:"formlabelrequired", asterisk:" (mandatory)"}]
...
});
Вот код для плагина:
/**
* Plugin (ptype = 'formlabelrequired') that adds "asterisk" to labels
* for Fields with "allowBlank: false".
*/
Ext.define('Ext.ux.plugin.form.LabelRequired', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.formlabelrequired',
asterisk: ' <span class="required"> *</span>',
constructor: function() {
this.callParent(arguments);
},
init: function(formPanel) {
formPanel.on('beforerender', this.onBeforeRender, this);
},
/**
* @private
* Adds asterisk to labels.
*/
onBeforeRender: function(formPanel) {
var i, len, items;
items = formPanel.query('[allowBlank=false]');
for (i = 0, len = items.length; i < len; i++) {
item = items[i];
item.afterLabelTextTpl = (item.afterLabelTextTpl || "") + this.asterisk;
}
return true;
}
});
Если вы не хотите что-либо переопределять, поместите звездочку в метку Separator:
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'requestor_name',
allowBlank: false,
labelSeparator : ': <span style="color:red">*</span>'
}
На самом деле, я думаю, что использование fieldSubTpl и / или labelableRenderTpl для добавления * - более чистый подход, чем использование прослушивателя событий. События могут быть остановлены, слушатели могут быть отсоединены.
Я думаю, что OP(Lionel Chan) беспокоился о том, что использование Ext.override - своего рода хакерство, и он на 100% прав. Но если мы передадим пользовательский tpl на уровне конфигурации формы, это не так уж плохо:
Ext.create('Ext.form.Panel',{
defaults:{
fieldSubTpl:['<input id="{id}" type="{type}" ',
'<tpl if="name">name="{name}" </tpl>',
'<tpl if="size">size="{size}" </tpl>',
'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
'class="{fieldCls} {typeCls}" autocomplete="off" />',
'<span>',
'<tpl if="allowBlank==false">*</tpl>',
'</span>',
{
compiled: true,
disableFormats: true
}]},
items : [{
xtype : 'textfield',.....
Там может быть что-то не так с TPL, я не пробовал.
Если вы хотите, чтобы красный * отображался для метки поля, мы можем использовать field label, который делает это.
Например, приведенный ниже код создает новое текстовое поле с именем метки "Имя" и отображается красная звездочка
var name = new Ext.form.TextField({
fieldLabel : 'Label<span style=\"color:red;\" ext:qtip=\"This field is required\"> *</span>',
name : 'name',
id: 'Name',
maxLength : 40,
width : 205,
allowBlank : false
});
Есть так много способов сделать это, и немногие из них вы можете найти выше, я предлагаю следующее:
{
xtype : 'label',
html:'<span>First Name</span><span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
width:50,
}
Просто вы можете поместить как звездочку, так и текст метки в одно свойство html.