inputEx - How to use the Dialog widget

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
						}
				});

inputEx - Dialog Widget Usage

Basic Dialog creation

Change dialog properties