inputEx - InPlaceEdit Usage

Basic InPlaceEdit creation

Use the following code to create a basic inputEx InPlaceEdit.

(click to edit)
1new inputEx.InPlaceEdit({parentEl: 'container1', editorField:{type:'string'}, animColors:{from:"#FFFF99" , to:"#DDDDFF"} }); 
view plain | print | ?

Complex group example

Combine InPlaceEdit and groups


Lena Idontknow
1new inputEx.InPlaceEdit({ 
2    parentEl: 'container2',  
3    editorField:{ 
4        type:'group',  
5        fields: [ 
6            { label: 'Firstname',name: 'firstname' }, 
7            { label: 'Lastname', name: 'lastname' }, 
8            { type:'url', label: 'Photo', name:'picUrl', favicon: false } 
9        ] 
10    }, 
11    visu: {visuType: 'func', func: function(val) { 
12        if( YAHOO.lang.isUndefined(val) ) return inputEx.messages.emptyInPlaceEdit; 
13        return '<img src="'+val.picUrl+'" style="width: 128px; height: 128px;" /><br /><b>'+val.firstname+' '+val.lastname+'</b>'
14    }}, 
15    value: { 
16            firstname: 'Lena'
17            lastname: 'Idontknow'
18            picUrl: 'http://www.limsi.fr/Individu/vezien/lena.jpg' 
19    } 
20}); 
view plain | print | ?

Getting the value

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

(click to edit)
1var field = new inputEx.InPlaceEdit({parentEl: 'container3', editorField:{type:'string'} }); 
2var button = inputEx.cn('button'nullnull"getValue"); 
3YAHOO.util.Event.addListener(button, 'click'function() { 
4    alert(field.getValue()); 
5}); 
6YAHOO.util.Dom.get('container3').appendChild(button); 
view plain | print | ?

Image url from a dropdown menu

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