# inputEx - InPlaceEdit Usage

## Basic InPlaceEdit creation

Use the following code to create a basic inputEx InPlaceEdit.

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

## Complex group example

Combine InPlaceEdit and groups

new 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( YAHOO.lang.isUndefined(val) ) return inputEx.messages.emptyInPlaceEdit; return '<img src="'+val.picUrl+'" style="width: 128px; height: 128px;" /><br /><b>'+val.firstname+' '+val.lastname+'</b>'; }}, 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 inputEx.InPlaceEdit({parentEl: 'container3', editorField:{type:'string'} }); var button = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(button, 'click', function() { alert(field.getValue()); }); YAHOO.util.Dom.get('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' });