PDA

View Full Version : inlineField + autoSave plugin



Gabor Turi
10 Sep 2008, 1:49 PM
I would have liked a similar one, than the http://extjs.com/learn/Extension:InlineFormFields
only,
- let him be shorter
- plugin instead of inheritance (optional type)
- save is not needed (this is another plugin: 222304)
- inline-invalid status

can be looked at: http://www.stack.hu/extjs/inlinefield_plugin.html, with autoSave:http://www.stack.hu/extjs/inlinefield_autosave_plugin.html

code:

Ext.onReady(function() {

var inlineField = function() {
return {
init: function(field) {
field.addInlineClass = function() {
this.el.addClass(this.isValid()?'x-form-inline-field':'x-form-inline-invalid-field');
if (this.el.next()) this.el.next().addClass('x-hidden');
};
field.removeInlineClass = function() {
this.el.removeClass(['x-form-inline-field', 'x-form-inline-invalid-field']);
if (this.el.next()) this.el.next().removeClass('x-hidden');
};
field.on('render', field.addInlineClass, field);
field.on('blur', field.addInlineClass, field);
field.on('focus', field.removeInlineClass, field);
}
}
}();

new Ext.Panel({
title:'inlineField plugin',
renderTo: Ext.getBody(),
frame: true, style: 'margin:10',
width: 290, labelWidth:70,
layout: 'form',
defaults: { width:200, plugins:inlineField },
items: [
{fieldLabel:'TextField', xtype:'textfield', value:'Lorem Ipsum'},
{fieldLabel:'NumberField', xtype:'numberfield', value:123456},
{fieldLabel:'EmailField', xtype:'textfield', value:'info@domain.com', vtype:'email'},
{fieldLabel:'DateField', xtype:'datefield', value:'09/10/2008'},
{fieldLabel:'TimeField', xtype:'timefield', value:'12:45 PM'},
{fieldLabel:'TextArea', xtype:'textarea', value:'Lorem\nIpsum'},
{
fieldLabel:'ComboBox', xtype:'combo', value:1, triggerAction: 'all',
displayField: 'text', valueField: 'value', typeAhead: true, mode: 'local',
store: new Ext.data.SimpleStore({fields: ['value', 'text'], data: [[1,'Yes'], [0,'No']]})
}
]
});

});css:

.x-form-inline-invalid-field, textarea.x-form-inline-invalid-field,
.x-form-inline-field, textarea.x-form-inline-field {
border: 1px solid transparent;
_border: none; // IE6
cursor: pointer;
overflow: hidden;
background-color: transparent;
}
.x-form-inline-field, textarea.x-form-inline-field {
background: transparent;
}

ajaxvador
10 Sep 2008, 1:52 PM
good job=D>

Gabor Turi
11 Sep 2008, 12:12 AM
I complemented the inlineField plugin with the autoSave plugin: http://www.stack.hu/extjs/inlinefield_autosave_plugin.html

code:

var autoSave = function() {
return {
init: function(field) {
field.autoSaveInit = function() {
this.form = this.findParentByType('form');
if ((!this.form || !this.form.autoSave) && !this.autoSave) {
throw 'autoSave config is not found!';
}
this.inValidFocus = function() {
if (!this.isValid()) { this.fireEvent('focus'); }
};
this.doSave = function() {
if (!this.isValid()) { return; }
var req = this.autoSave || this.form.autoSave;
req.params[this.name] = this.getValue().toString();
Ext.Ajax.request(req);
delete req.params[this.name];
};
this.on('blur', this.inValidFocus);
this.on('change', this.doSave);
}
field.on('render', field.autoSaveInit, field);
}
}
}();usage:

new Ext.FormPanel({
title:'inlineField + autoSave plugin',
autoSave: {
url:'null.php',
method: 'post',
success: Ext.emptyFn,
failure: function() { Ext.MessageBox.show({title: 'failure', msg: '.......', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR}) },
params: {id: 123},
scope: this
},
renderTo: Ext.getBody(),
frame: true, style: 'margin:10',
width: 300, labelWidth:80,
defaults: { width:200, plugins:[inlineField, autoSave] },
items: [
{fieldLabel:'TextField', xtype:'textfield', name:'textfield', value:'Lorem Ipsum'},
{fieldLabel:'NumberField', xtype:'numberfield', name:'numberfield', value:123456},
{fieldLabel:'EmailField', xtype:'textfield', name:'emailfield', value:'info@domain.com', vtype:'email'},
{fieldLabel:'DateField', xtype:'datefield', name:'datefield', value:'09/10/2008'},
{fieldLabel:'TimeField', xtype:'timefield', name:'timefield', value:'12:45 PM'},
{fieldLabel:'TextArea', xtype:'textarea', name:'textarea', value:'Lorem\nIpsum'},
{
fieldLabel:'ComboBox', xtype:'combo', name:'combobox', value:1, triggerAction: 'all',
displayField: 'text', valueField: 'value', typeAhead: true, mode: 'local',
store: new Ext.data.SimpleStore({fields: ['value', 'text'], data: [[1,'Yes'], [0,'No']]})
}
]
});or

new Ext.FormPanel({
title:'inlineField + autoSave plugin',
renderTo: Ext.getBody(),
frame: true, style: 'margin:10',
width: 300, labelWidth:80,
defaults: { width:200 },
items: [
{
fieldLabel:'autoSave', xtype:'textfield', name:'autoSave', value:'Lorem Ipsum', plugins:[inlineField, autoSave],
autoSave: {
url:'null.php',
method: 'post',
success: Ext.emptyFn,
failure: function() { Ext.MessageBox.show({title: 'failure', msg: '.......', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR}) },
params: {id: 123},
scope: this
}
},
{fieldLabel:'noAutoSave', xtype:'textfield', name:'noAutoSave', value:'Lorem Ipsum', plugins:[inlineField]}
]
});

mabello
11 Sep 2008, 4:03 AM
Nice!
I would just suggest you to make also the checkbox appear like an inline field, it could be a nice addition and it would complete your work, and it seems achievable :)
Keep up the good work!

Gabor Turi
11 Sep 2008, 5:29 AM
I don't like the checkboxs :)

I modified it a little bit on him, but the checkbox would be needed new icon.
http://www.stack.hu/extjs/inlinefield_autosave_plugin.html


var inlineField = function() {
return {
init: function(field) {
field.addInlineClass = function() {
this.el.addClass(this.isValid()?'x-form-inline-field':'x-form-inline-invalid-field');
if (this.el.next('img')) this.el.next('img').addClass('x-hidden');
};
field.removeInlineClass = function() {
this.el.removeClass(['x-form-inline-field', 'x-form-inline-invalid-field']);
if (this.el.next('img')) this.el.next('img').removeClass('x-hidden');
};
field.on('render', field.addInlineClass, field);
field.on('blur', field.addInlineClass, field);
field.on('focus', field.removeInlineClass, field);
}
}
}();

var autoSave = function() {
return {
init: function(field) {
field.autoSaveInit = function() {
this.form = this.findParentByType('form');
if ((!this.form || !this.form.autoSave) && !this.autoSave) {
throw 'autoSave config is not found!';
}
this.inValidFocus = function() {
if (!this.isValid()) { this.fireEvent('focus'); }
};
this.doSave = function() {
if (!this.isValid()) { return; }
var req = this.autoSave || this.form.autoSave;
req.params[this.name] = this.getValue().toString();
Ext.Ajax.request(req);
delete req.params[this.name];
};
this.on('blur', this.inValidFocus);
if ( this.getXType() == 'checkbox' ) {
this.on('check', this.doSave);
} else {
this.on('change', this.doSave);
}
}
field.on('render', field.autoSaveInit, field);
}
}
}();

Gabor Turi
11 Sep 2008, 12:28 PM
How behaves a checkbox in inline form? :)

mabello
11 Sep 2008, 1:54 PM
Gabor,
This is a damn good question ;)
I think that changing the image or using a different css will be enough :)

mjlecomte
20 Sep 2008, 4:33 AM
Please consider adding this to the UX repository. :)

Gabor Turi
18 Oct 2008, 6:04 AM
Hi! What is meant by "adding this to the UX repository"? :)

mjlecomte
18 Oct 2008, 6:15 AM
See the link in my signature. You'll see all the benefits described there (demos, docs, one place to keep track of extensions, etc.).