[v1.3] new Ext.form field type - InlineComboBox

[Nullity]

And for the trifecta (in addition to InlineTextField and InlineTextArea), here is InlineComboBox:


Ext.form.InlineComboBox = function(config) {
Ext.form.InlineComboBox.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.InlineComboBox, Ext.form.ComboBox, {
inlineClass: 'x-form-inline-field',
disabledClass: 'x-form-inline-field-disabled',
saveOnlyOnChange: true,
confirmSave: false,
confirmText: 'The data has been successfully saved.',

doSave : function() {
var cfg = this.autoSave;

this.params = (this.name || this.id) + '=' + this.getRawValue();

if (this.hiddenName) {
this.params += '&' + this.hiddenName + '=' + this.hiddenField.value;
}

if (typeof cfg == 'object') {
this.method = cfg.method || 'POST';
this.callback = (!cfg.callback) ? {success: Ext.emptyFn, failure: Ext.emptyFn} :
{success: cfg.callback.success || cfg.callback, failure: cfg.callback.failure || Ext.emptyFn};
this.scope = cfg.scope || this.callback;

if (this.confirmSave === true) {
var success = function() {
Ext.MessageBox.alert('Success', this.confirmText);
}.createDelegate(this);

this.callback.success = success.createSequence(this.callback.success);
}

var p = (cfg.params) ? cfg.params : '';

if (p) {
if (typeof p == 'object') {
this.params += '&' + Ext.urlEncode(p);
}
else if (typeof p == 'string' && p.length) {
this.params += '&' + p;
}
}

this.url = (this.method == 'POST') ? cfg.url : cfg.url + '?' + this.params;
}
else if (typeof cfg == 'string') {
this.method = 'POST';
this.url = (this.method == 'POST') ? cfg : cfg + '?' + this.params;
}

Ext.Ajax.request({
url: this.url,
method: this.method,
success: this.callback.success,
failure: this.callback.failure,
params: this.params,
scope: this.scope
});
}
});

Ext.override(Ext.form.InlineComboBox, {
onRender : Ext.form.ComboBox.prototype.onRender.createSequence(function() {
this.lastValue = '';
this.lastRawValue = '';
this.el.addClass(this.inlineClass);
this.trigger.setDisplayed(false);
}),

onFocus : Ext.form.ComboBox.prototype.onFocus.createSequence(function() {
this.el.removeClass(this.inlineClass);
this.trigger.setDisplayed(true);
}),

triggerBlur : Ext.form.ComboBox.prototype.triggerBlur.createSequence(function() {
if (this.isValid() && !this.el.hasClass(this.inlineClass)) {
this.el.addClass(this.inlineClass);
this.trigger.setDisplayed(false);

if (!this.store.getAt(this.view.getSelectedIndexes()[0]) || !this.getRawValue()) {
this.selectedIndex = -1;
if (this.hiddenField) {
this.hiddenField.value = '';
}
this.value = '';
}

if (this.autoSave && (this.saveOnlyOnChange === false || this.getValue() != this.lastValue || this.getRawValue() != this.lastRawValue)) {
this.doSave();
}

this.lastValue = this.getValue();
this.lastRawValue = this.getRawValue();
}
})
});

... and the CSS (same as the other Inline fields):


.x-form-inline-field, textarea.x-form-inline-field {
background: transparent;
border: 1px solid transparent;
cursor: pointer;
overflow: hidden;
}

.x-form-inline-field-disabled {
color: #000000;
cursor: default;
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}

This does not have the functionality of hitting the ESC key to cancel editing as the other Inline fields do. Due to the nature of the ComboBox field, things work a bit differently and I haven't yet put the time into getting that to work. Everything else works though.


UPDATE 1 (9/10/2007): Updated code to version 1.2. Added new options: 'confirmSave' and 'confirmText'. The first, 'confirmSave' is a boolean which when true, will display a MessageBox containing the text set by 'confirmText' (optional) when the changes are saved successfully. Also, the 'autoSave' object now supports a 'scope' setting.

UPDATE 2 (9/11/2007): Updated code for version 1.3. Changed the way 'confirmSave' was handled to fix a bug. Refactored some code to be cleaner.

[Nullity]

First post updated to version 1.2 (along with details).

[matjaz]

hmm.. extending class with createSequence ?? take a look at examples how to override class methods.

[galdaka]

Live example please!

Thanks in advance,

[Nullity]

Live example please!

Thanks in advance,
I'd love to, but unfortunately, I do not have access to a public web host.


hmm.. extending class with createSequence ?? take a look at examples how to override class methods.

I could use override to create the new methods, but that's not too important; using '[class].prototype.[method]' does the same thing. However, I still want to use createSequence as it allows me to append to an already existing method without having to duplicate it, resulting in less code. And more importantly, this way, if the source method gets changed in a future version of Ext, I won't have to edit my code to compensate.

Example:


Ext.override(Ext.form.InlineComboBox, {
onRender : Ext.form.ComboBox.prototype.onRender.createSequence(function() {
this.lastValue = '';
this.lastRawValue = '';
this.el.addClass(this.inlineClass);
this.trigger.setDisplayed(false);
}),

onFocus : Ext.form.ComboBox.prototype.onFocus.createSequence(function() {
this.el.removeClass(this.inlineClass);
this.trigger.setDisplayed(true);
}),

triggerBlur : Ext.form.ComboBox.prototype.triggerBlur.createSequence(function() {
if (this.isValid() && !this.el.hasClass(this.inlineClass)) {
this.el.addClass(this.inlineClass);
this.trigger.setDisplayed(false);

if (!this.store.getAt(this.view.getSelectedIndexes()[0]) || !this.getRawValue()) {
this.selectedIndex = -1;
if (this.hiddenField) {
this.hiddenField.value = '';
}
this.value = '';
}

if (this.autoSave && (this.saveOnlyOnChange === false || this.getValue() != this.lastValue || this.getRawValue() != this.lastRawValue)) {
this.doSave();
}

this.lastValue = this.getValue();
this.lastRawValue = this.getRawValue();
}
})
});

Hmm, now that I'm looking at it, this way does look a bit "cleaner". I may do it like this instead. I have no plans to get rid of 'createSequence' though, for the reasons stated above.

[Nullity]

I have added the Inline fields to the Extensions wiki which includes a link to a live demo:

http://extjs.com/learn/Ext_Extensions

[Teflon]

This is cool. One usability suggestion, the combobox should auto expand when the user clicks on it. Right now, you have to click to activate it, then click the arrow to select a value.

[Choleriker]

Hello,

i like you Inline components and my new project uses ext 2.0. All works fine, but if im using anchoring with 100% the InlineComboBox fits the input-field to 100% and the trigger-button seems to be more than 100%. But if im resizing the form with an focused inline-combo it fits correctly. Any ideas?

Im developing now a InlineDateField depending on your nice work, with that i have the same problem.

[Nullity]

Hello,

i like you Inline components and my new project uses ext 2.0. All works fine, but if im using anchoring with 100% the InlineComboBox fits the input-field to 100% and the trigger-button seems to be more than 100%. But if im resizing the form with an focused inline-combo it fits correctly. Any ideas?

Im developing now a InlineDateField depending on your nice work, with that i have the same problem.

I haven't yet tested any of the Inline fields with Ext 2.0. I'm glad you got it to (somewhat) work, but I would imagine there are some things that would need updated.

After I get a chance to play around with 2.0 a bit more and get some free time, I'll port over all the Inline fields.