1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
    Nullity is on a distinguished road

      0  

    Default [v1.3] new Ext.form field type - InlineTextField

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


    I created a new form field type called InlineTextField. On render, the field shows as plain text. When the text is clicked on, it changes to a regular TextField (basically like an EditorGrid), and then changes back to plain text when the field is blurred. This is much easier and faster than using an Ext.Editor, which I'm not even sure can be used in a form anyway.

    Here is the code:

    Code:
    Ext.form.InlineTextField = function(config) {
    	Ext.form.InlineTextField.superclass.constructor.call(this, config);
    
    	this.on('specialkey', function(f, e) {
    		if (e.getKey() == e.ESC) {
    			f.setValue(this.startValue);
    			f.blur();
    		}
    	}, this);
    };
    
    Ext.extend(Ext.form.InlineTextField, Ext.form.TextField, {
    	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.getValue();
    
    		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
    		});
    	},
    
    	reset : function() {
    		Ext.form.TextField.superclass.reset.call(this);
    
    		if (this.value) {
    			this.setRawValue(this.value);
    		}
    		else if (this.emptyText && this.getRawValue().length < 1) {
    			this.setRawValue(this.emptyText);
    			this.el.addClass(this.emptyClass);
    		}
    	}
    });
    
    Ext.override(Ext.form.InlineTextField, {
    	onRender : Ext.form.TextField.prototype.onRender.createSequence(function() {
    		this.el.addClass(this.inlineClass);
    
    		if (this.editable === false) {
    			this.disabled = true;
    		}
    	}),
    
    	onFocus : Ext.form.TextField.prototype.onFocus.createSequence(function() {
    		if (this.editable !== false) {
    			this.el.removeClass(this.inlineClass);
    		}
    	}),
    
    	onBlur : Ext.form.TextField.prototype.onBlur.createSequence(function() {
    		if (this.isValid() && !this.el.hasClass(this.inlineClass)) {
    			this.el.addClass(this.inlineClass);
    
    			if (this.autoSave && (this.saveOnlyOnChange === false || this.getValue() != this.startValue)) {
    				this.doSave();
    			}
    		}
    	})
    });
    ... and here is the needed CSS:

    Code:
    .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);
    }
    It includes a couple new config options. The first is 'autoSave', which when set and the field is blurred, it does and ajax call to immediately save the changes. The 'autoSave' option accepts either a string containing the url for the ajax call, or an object, like so:

    Code:
    autoSave: '/path/ajax.php'
    or
    autoSave: {url: '/path/ajax.php', method: 'POST', callback: some_function, scope: this}
    There is also a 'saveOnlyOnChange' option which should be pretty self-explanatory. When true (default), the field only auto-saves the data on blur if it was changed. So, when false, the data is always saved, whether changed or not.


    UPDATE 1: I added code suggested by schmidetzki which cancels the edit if the ESC key is pressed.


    UPDATE 2 (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 3 (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.
    Attached Images
    Last edited by Nullity; 12 Sep 2007 at 9:05 AM. Reason: version 1.3

  2. #2
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    any example or screenshot?

  3. #3

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
    Nullity is on a distinguished road

      0  

    Default


    Thank you for supplying a demo, JorisA. Sorry, I don't have a public web site to set up my own, and I didn't post a screenshot because I was short on time. I have attached a screenshot now though (to the first post).

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Hmmm I think a InlineForm would be awesome:

    Add a config var editMode (or something) to the Form class:
    'default' = Show input elements for all fields
    'single' = Only show input element for focussed field

    And lockedMode:
    'default' = All fields are editable
    'locked' = Fields are readonly

    I think this can be achieved by extending the Form class, and making some small changes to the Field one (since all inputs are extended by it)

    If you've got big forms like contact details it makes them nice to view and print without the need for a separate edit form. (just add a small unlock/edit icon in the form header). This also doesn't confuse users viewing the form without editing rights.

    Maybe I'm talking poo because I'm pretty tired. I will read this tomorrow and hope it still looks like a good idea.

  6. #6
    Ext User schmidetzki's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    110
    Vote Rating
    0
    schmidetzki is on a distinguished road

      0  

    Default Excellent!

    Excellent!


    I implemented a similar function but yours is much nicer!
    I would however prefere to cancel edit if the user presses ESC and to call "save" when the user presses ENTER.

    Updated: Anyway - here is my version:
    Code:
    BI.util.editDivText=function (el, callback){
        var dh = Ext.DomHelper;
        var span = dh.insertBefore(el, {tag:"span"})
        var f = new Ext.form.TextField({
            originalElement: el,
            callback: callback,
            restore: function(){
                span.parentNode.removeChild(span);
                //info.parentNode.removeChild(info);
            },
            width: Ext.get(el).getWidth(),
            qtip: "ESC to cancel edit",
            value: el.innerHTML
        });
        el.style.display="none";
        f.render(span);
        f.on("specialkey", function(field, ev){
            if(ev.getKey() == ev.ENTER){
                ev.preventDefault();
                field.el.dom.blur();
            }
            if(ev.getKey() == ev.ESC){
                field.reset();
                field.el.dom.blur();
            }
        })
        f.on("change", function(field){
            field.originalElement.innerHTML = field.getValue();
            field.callback(field.getValue())
        });
        f.on("blur", function(field){
            field.restore();
            field.originalElement.style.display="block";
            field.destroy();
        });
        f.focus(true);
    }
    Last edited by schmidetzki; 17 Jun 2007 at 8:06 AM. Reason: Added my own example

  7. #7
    Ext User
    Join Date
    Jun 2007
    Posts
    10
    Vote Rating
    0
    z1nkum is on a distinguished road

      0  

    Default InlineTextArea ?

    InlineTextArea ?


    Thanks a lot!

    Is it possible to do subj?
    I mean plain text that transform to TextArea on click.
    I think it's must looks like googles notebook fields.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
    Nullity is on a distinguished road

      0  

    Default


    schmidetzki, that's a great idea using ESC to cancel the edit. I hope you don't mind, I edited my code in the first post to add this functionality.

    Quote Originally Posted by z1nkum View Post
    Thanks a lot!

    Is it possible to do subj?
    I mean plain text that transform to TextArea on click.
    I think it's must looks like googles notebook fields.
    I just posted InlineTextArea.

    http://extjs.com/forum/showthread.php?t=8118

  9. #9
    Ext User
    Join Date
    Jun 2007
    Posts
    10
    Vote Rating
    0
    z1nkum is on a distinguished road

      0  

    Default GREAT!!

    GREAT!!


    Thanks a lot for you!!

  10. #10
    Developer... jon.whitcraft's Avatar
    Join Date
    Mar 2007
    Posts
    391
    Vote Rating
    0
    jon.whitcraft is on a distinguished road

      0  

    Default


    This would a great add to the Wiki under the User Extensions:

    http://extjs.com/learn/Ext_Extensions
    Jon
    Lead Internal Application Engineer - SugarCRM
    h2ik.co

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."