Как поместить X внутри textfield, чтобы очистить текст в extjs
Я хочу реализовать кнопку X внутри текстового поля (x в правой части текстового поля), чтобы очистить введенные тексты. Я видел много приложений extjs, которые имеют эту функцию. Как мне это сделать? Любые предложения или замечания были бы весьма признательны... Спасибо
Это выглядит примерно так...
5 ответов
вы должны использовать ВН.форма.поле.Триггер. Вот, например,
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
initComponent: function () {
var me = this;
me.triggerCls = 'x-form-clear-trigger'; // native ExtJS class & icon
me.callParent(arguments);
},
// override onTriggerClick
onTriggerClick: function() {
this.setRawValue('');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items:[{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'
}]
});
для удобства тестирования, вот JSFiddle
Это то, что работает для меня с CSS:
в CSS
.x-form-clear {
background-image: url('../../resources/themes/images/default/form/clear-trigger.gif');
background-position: 0 0;
width: 17px;
height: 22px;
border-bottom: 1px solid #b5b8c8;
cursor: pointer;
cursor: hand;
overflow: hidden;
}
.x-form-clear-over {
background-position: -17px 0;
border-bottom-color: #7eadd9;
}
.x-form-clear-click {
background-position: -68px 0;
border-bottom-color: #737b8c;
}
класс
Ext.define('Ext.ux.form.field.Clear', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.clearfield',
triggerBaseCls: 'x-form-clear',
onTriggerClick: function() {
this.setValue();
}
});
использование
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
Ext.create('Ext.ux.form.field.Clear', {
fieldLabel: 'Clear Field',
cls: 'clear-trigger'
})
]
})
или используйте этот плагин "clearbutton":http://www.eekboom.de/ClearButton.html
Мне это нравится, потому что это просто плагин, одна строка, вместо того, чтобы требовать пользовательский подкласс.
кроме того, его можно использовать для всех видов полей, а не только для текстового поля.
можно использовать Ext.form.field.Text
с триггерами в Extjs 5.0 и более поздних версиях нет необходимости определять новый тип.
var textfield = Ext.create('Ext.form.field.Text', {
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function () {
this.setValue('');
}
}
}
});
область действия обработчика триггера -
в ExtJS 6+ вы также можете просто добавить следующие 2 конфигурации на свой Ext.form.field.Text
и показать/скрыть триггер со встроенным слушателя изменения
triggers: {
clearText: {
cls: 'clear-text-trigger-icon',
handler: function() {
this.setValue('');
}
}
},
listeners: {
change: function(textField) {
if (textField.getValue()) {
textField.setHideTrigger(false);
} else {
textField.setHideTrigger(true);
}
}
}