inputEx - InPlaceEdit Usage

Basic InPlaceEdit creation

Use the following code to create a basic inputEx InPlaceEdit.

			new Y.inputEx.InPlaceEdit({parentEl: 'container1', editorField:{type:'string'}, animColors:{from:"#FFFF99" , to:"#DDDDFF"} });

Complex group example

Combine InPlaceEdit and groups

			new Y.inputEx.InPlaceEdit({
				parentEl: 'container2', 
				editorField:{
					type:'group', 
					fields: [
						{ label: 'Firstname',name: 'firstname' },
						{ label: 'Lastname', name: 'lastname' },
						{ type:'url', label: 'Photo', name:'picUrl', favicon: false }
					]
				},
				visu: {visuType: 'func', func: function(val) {
					if( Y.Lang.isUndefined(val) ) return inputEx.messages.emptyInPlaceEdit;
					return '
'+val.firstname+' '+val.lastname+'';
				}},
				value: {
						firstname: 'Lena',
						lastname: 'Idontknow',
						picUrl: 'http://www.limsi.fr/Individu/vezien/lena.jpg'
				}
			});

Getting the value

When the editor is opened, getValue return the editor value.

			var field = new Y.inputEx.InPlaceEdit({parentEl: 'container3', editorField:{type:'string'} });
			var button = inputEx.cn('button', null, null, "getValue");
			Y.one(button).on('click', function() {
				alert(field.getValue());
			});
			Y.one('#container3').appendChild(button);

Image url from a dropdown menu

			inputEx({
				type: 'inplaceedit',
				parentEl: 'container4', 
				label: "PageRank",
				editorField:{
					type:'select', 
					name: 'pagerank',
					choices: ['0','1','2','3','4','5','6','7','8','9','10']
				},
				visu: {
					visuType: 'func', 
					func: function(val) {
						return inputEx.cn('img',{src: "http://www.page-rank-lookup.com/i/style1/pagerank"+val+".png"});
					}
				},
				value: '5'
			});