PDA

View Full Version : Get listener within Extension



gesche
6 May 2011, 3:43 AM
I made an extension which automaticaly creates me a range field. It shows me a from and a to field based on several parameters, which works fine. Now I would like to send a select listener, so I don't have to set them for every range field.

Here is my extension


Ext.ux.form.RangeField = Ext.extend(Ext.Container, {
layout : "hbox",
defaults : {
flex : 1,
height: 22
},
initComponent : function() {
this.items = [
{
layout: "form",
items : [{
xtype : this.rangetype,
id : this.id + ".from",
name : this.name + ".from",
store : this.store,
editable : this.editable,
typeAhead : this.typeAhead,
mode : this.mode,
triggerAction : this.triggerAction,
resizable : this.resizable,
format : this.format,
minValue : this.minValue,
emptyText : this.emptyText,
displayField : this.displayField,
valueField : this.valueField,
hideLabel : true,
anchor : "100%",
listeners : {
select : function() {
setFilterDate(this);
}
}
}]
}, {
xtype : "box",
html : " – ",
width : 14
}, {
layout: "form",
items : [{
xtype : this.rangetype,
id : this.id + ".to",
name : this.name + ".to",
store : this.store,
editable : this.editable,
typeAhead : this.typeAhead,
mode : this.mode,
triggerAction : this.triggerAction,
resizable : this.resizable,
format : this.format,
minValue : this.minValue,
emptyText : this.emptyText,
displayField : this.displayField,
valueField : this.valueField,
hideLabel : true,
anchor : "100%",
listeners : {
select : function() {
setFilterDate(this);
}
}
}]
}
];
Ext.ux.form.RangeField.superclass.initComponent.apply(this, arguments);
},
afterRender : function() {
Ext.ux.form.RangeField.superclass.afterRender.call(this);
}
});


And here is the part where I call it



{
xtype : "rangefield",
rangetype : "combo",
name : "calenderWeek",
id : "calenderWeek",
fieldLabel : "calenderWeek",
editable : false,
store : store.cw,
displayField : "name",
valueField : "kw",
typeAhead : true,
mode : "local",
triggerAction : "all",
resizable : true
}


Is there a way that I can set a listerner on the xtype: "rangefield" and it will use this within my extension? I don't want to make a new extension for every different listener function.

Thx

kaendsle
6 May 2011, 9:19 AM
You can't add listeners to the initComponent() method of an extension, because by the time the initComponent() method is called, event-handling behavior has already been determined. To add listeners across an extension, add them to the constructor() method.

Here's an example of a "Prompt" that automatically adds an "OK" button to the end of the child component list (items Array) before the component is rendered:


App.view.Prompt = Ext.extend(Ext.Window, {
constructor: function(config) {
config = config || {};
config.listeners = config.listeners || {};
Ext.applyIf(config.listeners, {
beforerender: function() {
this.add(new Ext.Button({
scale: 'medium', text: ' OK ',
style: {margin: '0 auto'},
handler: function() {
this.ownerCt.close();
}
}));
}
});
App.view.Prompt.superclass.constructor.call(this, config);
}
});

gesche
7 May 2011, 3:19 AM
Thanks for the fast reply. I tried to realise this but It seems that there is still somethig wrong.

I changed my rangefield call to


{
xtype : "rangefield",
rangetype : "combo",
name : "cw",
id : "cw",
fieldLabel : CalenderWeek,
editable : false,
store : store.cw,
typeAhead : true,
mode : "local",
triggerAction : "all",
resizable : true,
listeners : {
select : function() {
console.log("Test");
}
}
}


and my Extension to:


Ext.ux.form.RangeField = Ext.extend(Ext.Container, {
layout : "hbox",
defaults : {
flex : 1,
height: 22
},
initComponent : function() {
this.items = [
{
layout: "form",
items : [{
xtype : this.rangetype,
id : this.id + ".von",
name : this.name + ".von",
store : this.store,
editable : this.editable,
typeAhead : this.typeAhead,
mode : this.mode,
triggerAction : this.triggerAction,
resizable : this.resizable,
format : this.format,
minValue : this.minValue,
emptyText : this.emptyText,
displayField : this.displayField,
valueField : this.valueField,
hideLabel : true,
anchor : "100%"
}]
}, {
xtype : "box",
html : " – ",
width : 14
}, {
layout: "form",
items : [{
xtype : this.rangetype,
id : this.id + ".bis",
name : this.name + ".bis",
store : this.store,
editable : this.editable,
typeAhead : this.typeAhead,
mode : this.mode,
triggerAction : this.triggerAction,
resizable : this.resizable,
format : this.format,
minValue : this.minValue,
emptyText : this.emptyText,
displayField : this.displayField,
valueField : this.valueField,
hideLabel : true,
anchor : "100%"
}]
}
];
Ext.ux.form.RangeField.superclass.initComponent.apply(this, arguments);
},
constructor: function(config) {
config = config || {};
config.listeners = config.listeners || {};
console.log(config.listeners);


Ext.apply(this, config.listeners);
Ext.ux.form.RangeField.superclass.constructor.call(this, config);
},
afterRender : function() {
Ext.ux.form.RangeField.superclass.afterRender.call(this);
}
});

Ext.reg('rangefield', Ext.ux.form.RangeField);


When I do a console.log(config.listeners) I can see the select event but somehow if I select an value there is no console.log("Test"). It seems like the event is still not fired.

Do you have an idea whats wrong?

Thanks a lot!