# 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', fields: [ {type: 'select', label: 'Title', name: 'title', choices: ['Mr', 'Mrs', 'Ms'] }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' } }, {type:'email', label: 'Email', name: 'email'}, {type:'url', label: 'Website',name:'website'} ], buttons: [ {type: 'submit', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue())); return false; // prevent form submit }}, {type: 'link', 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', fields: [ {type:'string', label: 'Name', name: 'firstname', required: true }, {type:'email', label: 'Email', name: 'email', description: 'Won\'t be displayed...'}, {type:'url', label: 'Website',name:'website', typeInvite: '(optional)'}, {type:'text', label: 'Your comment',name:'comments'} ], buttons: [ {type: 'submit', value: 'Send', onClick: function() { alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue())); return false; }}, {type: 'link', 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 } });