inputEx - Dialog Widget Usage

Basic Dialog creation

Use the following code to create a basic inputEx Dialog. Note the scope hack with "Example1" to define the buttons callbacks.

// HTML code <button onclick="Example1.myPanel.show();">Show Panel</button> // Javascript code Example1 = {}; var formConfig = { type: 'form', inputParams: { fields: [ {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } }, {inputParams: {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' } }, {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } }, {type:'email', inputParams: {label: 'Email', name: 'email'}}, {type:'url', inputParams: {label: 'Website',name:'website'}} ], buttons: [ {type: 'button', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue())); }}, {type: 'button', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } } ] } } Example1.myPanel = new inputEx.widget.Dialog({ inputExDef: formConfig, title: 'Here the title of your dialog' });

Change dialog properties

Access the YUI panel properties with the "panelConfig" object. Example with a modal dialog. (See the YUI panel documentation for more informations.)

Example2 = {}; Example2.myPanel = new inputEx.widget.Dialog({ inputExDef: { type: 'form', inputParams: { fields: [ {type:'string', inputParams: {label: 'Name', name: 'firstname', required: true } }, {type:'email', inputParams: {label: 'Email', name: 'email', description: 'Won\'t be displayed...'}}, {type:'url', inputParams: {label: 'Website',name:'website', typeInvite: '(optional)'}}, {type:'text', inputParams: {label: 'Your comment',name:'comments'}} ], buttons: [ {type: 'button', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue())); }}, {type: 'button', value: 'Cancel', onClick: function() { Example2.myPanel.hide(); } } ] } }, title: 'Please post a comment !', panelConfig: { constraintoviewport: true, underlay:"shadow", close:true, fixedcenter: true, visible:false, draggable:true, modal: true } });