PDA

View Full Version : Calling Events of Subcomponet in an custom component.



jai@15
3 Dec 2014, 2:52 AM
Hi ,
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 */
}
}
}


}

lumberjack
8 Dec 2014, 10:48 AM
The fiddle below shows how to listen for events fired by child components.

en6

jai@15
9 Dec 2014, 1:39 AM
Hi Brain,
Thanks for the solution ,
I was able to call my child components events. but when i am applying vtypes to the textfield component its expecting me to configure events like blur,change,focus. also
.Events added :-
this.down('image').on({
click: { fn: this_obj.onImageClick, scope: this }
});
this.down('textfield').on({
blur: { fn: this_obj.textFieldBlur, scope: this },
change: { fn: this_obj.textFieldChange, scope: this },
focus: { fn: this_obj.textFieldFocus, scope: this }
});

Field Configured :-
{
xtype: 'multitextfield',
name: 'email',
vtype: 'email',
msgTarget: 'qtip',
labelWidth: 100,
labelAlign: 'side',
imageSrc: 'images/drop-add_new.png',
allowBlank: false,
onImageClick: function() {
var thisContainer = this.findParentByType('container');
thisContainer.remove(this);
}
}

My requirement is to define a field which can help us to add or remove fields which i posted. Here i need to a textfield and ill restrict the inputs to text field based on my current requirement . Now the listeners are optional. when i was configuring only the listerners as configured above. i am getting the bellow error.

Error:--
Uncaught Error: this.callParent() was called but there's no such method (textFieldBlur) found in the parent class (Ext.container.Container).
Uncaught Error: this.callParent() was called but there's no such method (textFieldChange) found in the parent class (Ext.container.Container).
Uncaught Error: this.callParent() was called but there's no such method (textFieldFocus) found in the parent class (Ext.container.Container) Could you please help, handle this kind of problems.

My Code in Fiddile
https://fiddle.sencha.com/fiddle/eoc

lumberjack
9 Dec 2014, 4:52 AM
I'm not sure I understand your inquiry. VTypes are meant to be added directly to the textfield configuration. I've updated the fiddle above to demo this. The 'alpha' vtype was added to only allow alpha characters to be entered into the field.

Thanks,
Brian

jai@15
9 Dec 2014, 9:24 PM
Hi Brain,
I got it worked , i found my mistake . I was calling this.callParent(arguments); inside the method that i configured. which is not required while we are configuring userdefined listeners to particular object events.

Actually , i am trying to improve my self.
please let me know if i am committing any mistakes or if i can approach any better way other than this.

Thanks,
Jai