PDA

View Full Version : Looking for examples of extending a form



EHodges
2 Aug 2013, 1:54 PM
How can I extend Ext.form.Panel to contain a button and pass the handler function for that button into the constructor? I can't find any examples similar to that, and all of the examples I've seen for Ext.define() are very simple.

My goal is to extend Ext.form.Panel and use my custom form in multiple places. Each use will provide its own button handler function (and some other details), but the button itself will be defined in my customized form.

(ETA: If there's a better way to think about this, let me know. I'm evaluating Ext-JS, fairly new to Javascript, but know many other languages.)

evant
2 Aug 2013, 2:41 PM
Ext.define('MyForm', {
extend: 'Ext.form.Panel',

initComponent: function() {
this.buttons = [{
text: 'A button',
handler: this.buttonHandler,
scope: this.buttonScope || this
}];
this.callParent();
}
})

Ext.onReady(function() {

var f = new MyForm({
title: 'Foo',
width: 200,
height: 200,
renderTo: document.body,
buttonHandler: function() {
// Defaults to the form
console.log(this);
}
});

});

EHodges
3 Aug 2013, 5:18 PM
Thanks you so much. That does just what I want.

I tried several similar approaches, but I tried to do it in the constructor method, not initComponent. I read one thread where a warning was given not to modify initComponent.

The key difference between my code and yours seems to be the scope definition "scope : this.buttonScope || this". Can you point me at some documentation about that? I have no idea what it means.

Thanks again.

EHodges
5 Aug 2013, 7:56 AM
Does anyone know what "buttonScope" means in the example above? I can't find that text anywhere in the Ex-JS source.

evant
5 Aug 2013, 3:36 PM
It's not a framework config, it's something I just made up.

By default, when you specify a handler for a button, the "this" reference will point to the button. By setting the scope property on the button, the "this" in the handler will refer to the passed object.

As an example:



Ext.define('MyForm', {
extend: 'Ext.form.Panel',

initComponent: function() {
this.buttons = [{
text: 'A button',
scope: this.buttonScope || this,
handler: this.buttonHandler
}];
this.callParent();
}
});

Ext.define('MyFoo', {
extend: 'Ext.panel.Panel',
layout: 'fit',

initComponent: function() {
this.items = new MyForm({
buttonScope: this,
buttonHandler: this.onFoo
});
this.callParent();
},

onFoo: function() {
console.log(this);
}
});

Ext.onReady(function() {
new MyFoo({
renderTo: document.body
});
});


See what happens when you comment out:



buttonScope: this,


Even better, see what happens when you comment out:



scope: this.buttonScope || this