PDA

View Full Version : [2.x, 3.0] Ext.ux.FormWindow



mschwartz
20 Apr 2009, 9:11 AM
Rather a trivial thing, but so handy (for me at least).

Use it like you would Ext.Window with a form as the content. It takes no special config options, use the Ext.Window ones (e.g. modal, width, height, title, etc.).

It provides two basic functions:
1) It finds the first active field in the Form and focuses it.
2) It finds the leftmost (first) button in the buttons config of the window and if you hit enter or return on the form, it calls that button's handler() function. It's smart enough to know that if the button is disabled not to call the handler.

The only real restriction of this extension is that the first button is your "OK" button. Not too difficult to hack it as you see fit.



Ext.namespace('Ext.ux');

Ext.ux.FormWindow = Ext.extend(Ext.Window, {
initComponent: function() {
Ext.ux.FormWindow.superclass.initComponent.apply(this, arguments);
},
onRender: function() {
Ext.ux.FormWindow.superclass.onRender.apply(this, arguments);
this.items.find(function(item) {
if (item instanceof Ext.form.Field && !item.hidden && !item.disabled) {
item.focus(false, 50);
return false;
}
return true;
}, this);
this.keymap = new Ext.KeyMap(this.el, {
key: [ 10, 13],
fn: function(e) {
if (this.buttons[0] && this.buttons[0].initialConfig.handler && !this.buttons[0].disabled) {
this.buttons[0].initialConfig.handler();
}
},
scope: this
});
}
});

mschwartz
20 Apr 2009, 9:16 AM
As a side note, I don't know of a lot of code in ExtJS passes JSLint.

Notice the 'return true' in the this.items.find callback function; much of Ext sources have exits to functions that don't return anything. This is technically OK because the functions return undefined, but a good IDE and possibly JSLint should complaint that "all return paths do not return a value"

mystix
26 Apr 2009, 7:31 PM
neat.

one thing to note:
since you're not doing anything special in the initComponent() method, you could simply omit completely it in this case.

mschwartz
27 Apr 2009, 4:55 AM
neat.

one thing to note:
since you're not doing anything special in the initComponent() method, you could simply omit completely it in this case.

Yeah, but it's a skeleton kind of example, so people may want to fill in that function with something that makes sense to them.