I am trying to define my own component by using Ext.define. In which i am extending Ext.container.
Container consists of a textfield and image. everything is fine . now i want use the listeners of the textfield. how can i call them or add listeners. I tried by puting them in configuration(red color and commented) at that time i am unable to use them but when i am trying to use vtypes focus,blur,changed were not calling as i was not configuring them. please let me know , i have tried calling in the form of methos the flaws that i committed.
Note:- I want to use the code at several places in my applications and i want to handle my textfield listeners on base of my requirement.
Please go through the code given below.
Thank You.
Ext.define('MultiTextField', {
extend: 'Ext.container.Container',
alias: 'widget.multitextfield', //this is the xtype (minus 'widget.')
config: {
editable: false,
labelAlign: null,
labelWidth: null,
labelSeparator: ':',
labelStyle: null,
msgTarget: 'qtip',
vtype: null,
minLength: null,
maxLength: 50,
allowBlank: true,
// regExp: new RegExp(/^[A-Za-z][A-Za-z0-9_]+$/),
regExp: null,
style: null,
readOnly: null,
name: null,
fieldLabel: null,
hiddenName: null,
hiddenValue: null,
imageSrc: null,
hideEditor: false, // hide plus icon
// textFieldRender: null, // render event for combo
// textFieldActivate: null, // activate event for textField
// textFieldChange: null, // textField event for change
// textFieldBlur: null, // textField event for blur
// textFieldDestroy: null, // textField event for destroy
// textFieldDeactivte: null, // textField event for deactivate
// textFieldFocus: null, // textField event for focus
// textFieldEnable: null, // textField event for enable
// textFieldDisable: null, // textField event for disable
// textFieldHide: null, // textField event for hide
// textFieldShow: null, // textField event for show
// onImageClick: null
},
onImageClick: function() {
this.callParent(arguments); //everything breaks if you forget this
},
// textFieldRender: function(obj) {
// this.callParent(arguments); //everything breaks if you forget this
// },
textFieldActivate: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldDeactivte: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldChange: function(obj, newValue, OldValue) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldBlur: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldFocus: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldDisable: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldEnable: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldHide: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
textFieldShow: function(obj) {
this.callParent(arguments); //everything breaks if you forget this
},
initComponent: function() {
var this_obj = this;
this.addEvents(
'onImageClick',
'textFieldActivate',
'textFieldDeactivte',
'textFieldChange',
'textFieldBlur',
'textFieldFocus',
'textFieldDisable',
'textFieldEnable',
'textFieldHide',
'textFieldShow'
);
var editable = this_obj.editable;
var labelAlign = this_obj.labelAlign;
var labelWidth = this_obj.labelWidth;
var labelSeparator = this_obj.labelSeparator;
var minLength = this_obj.minLength;
var maxLength = this_obj.maxLength;
var regExp = this_obj.regExp;
var style = this_obj.style;
var readOnly = this_obj.readOnly;
var name = this_obj.name;
var fieldLabel = this_obj.fieldLabel;
var imageSrc = this_obj.imageSrc;
var labelStyle = this_obj.labelStyle;
var msgTarget = this_obj.msgTarget;
var vtype = this_obj.vtype;
var allowBlank = this_obj.allowBlank;
var hiddenName = this_obj.hiddenName;
var hiddenValue = this_obj.hiddenValue;
var hideEditor = this_obj.hideEditor;
Ext.applyIf(this, {
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1, /*** hbox container consists of textfield along with an image ***/
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1, /*** hbox container consists of textfield along with an image ***/
items: [{
xtype: 'textfield', /** Displaying textField field which is restricted to only some events**/
fieldCls: hideEditor === false ? 'addIconRightSideStyle' : 'rounded-corners',
editable: editable,
flex: 1,
minLength: minLength,
maxLength: maxLength,
regExp: regExp,
style: style,
vtype: vtype,
allowBlank: allowBlank,
labelAlign: labelAlign,
msgTarget: msgTarget,
labelSeparator: labelSeparator,
labelWidth: labelWidth,
labelStyle: labelStyle,
readOnly: readOnly,
name: name,
fieldLabel: fieldLabel,
listeners: {
render: function(obj) {
// this_obj.textFieldRender(obj);
},
destroy: function(obj) {
this_obj.textFieldDestroy(obj);
},
deactivte: function(obj) {
this_obj.textFieldDeactivte(obj);
},
blur: function(obj) {
this_obj.textFieldBlur(obj);
},
change: function(obj, newValue, OldValue) {
this_obj.textFieldChange(obj, newValue, OldValue);
},
activate: function(obj) {
this_obj.textFieldActivate(obj);
},
enable: function(obj) {
this_obj.textFieldEnable(obj);
},
disable: function(obj) {
this_obj.textFieldDisable(obj);
},
focus: function(obj) {
this_obj.textFieldFocus(obj);
},
hide: function(obj) {
this_obj.textFieldHide(obj);
},
show: function(obj) {
this_obj.textFieldShow(obj);
}
}
}, {
xtype: 'hidden',
name: hiddenName,
value: hiddenValue
}, {
bodyCls: 'addIconStyle',
hidden: hideEditor, /** Displaying image on click of this image we are performing adding th field or removing.**/
items: [{
xtype: 'image',
src: imageSrc,
width: 20,
height: 20,
padding: '2 2 2 2',
style: 'cursor:pointer',
listeners: {
render: function(c) {
c.getEl().on('click', function() {
this_obj.onImageClick();
}, c);
}
}
}]
}]
}]
}]
});
this.callParent(arguments); //everything breaks if you forget this
}
});
usage:-
{
xtype: 'multitextfield',
fieldLabel: 'Email',
name: 'contactEmail',
vtype: 'email',
labelAlign: 'right',
allowBlank: false,
imageSrc: 'images/drop-add_new.png',
labelWidth: 90,
listeners: {
onImageClick: function() {
var thisContainer = this.findParentByType('container');
/* code based on my requirement */
}
}
}
}
Calling Events of Subcomponet in an custom component.
