Building an RTF-capable Form with the Ext JS Framework - The application’s complete source code (Page 4 of 4 ) As I stated in the section that you just read, below I listed for you the complete source code that renders the multi-tabbed online form, taking into account that you may be interested in playing around with it. Here you have it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Form with Tabbed Panels and HTML editor</title> <link rel="stylesheet" type="text/css" href="ext-all.css"/> <link rel="stylesheet" type="text/css" href="forms.css"/> <!-- common styles for the examples --> <link rel="stylesheet" type="text/css" href="examples.css"/> <script type="text/javascript" src="ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var theform=new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 600, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: 'First Name', name: 'first', anchor:'95%' }, { xtype:'textfield', fieldLabel: 'Company', name: 'company', anchor:'95%' }] },{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: 'Last Name', name: 'last', anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', anchor:'95%' }] }] },{ xtype:'tabpanel', plain:true, activeTab: 0, height:235, defaults:{bodyStyle:'padding:10px'}, items:[{ title:'Personal Information', layout:'form', defaults: {width: 230}, defaultType: 'textfield',
items: [{ fieldLabel: 'First Name', name: 'first', allowBlank:false, value: 'Alejandro' },{ fieldLabel: 'Last Name', name: 'last', value: 'Gervasio' },{ fieldLabel: 'Company', name: 'company', value: 'Electrical Web' }, { fieldLabel: 'Email', name: 'email', vtype:'email' }] },{ title:'Phone Numbers', layout:'form', defaults: {width: 230}, defaultType: 'textfield',
items: [{ fieldLabel: 'Home', name: 'home', value: '(777) 555-1010' },{ fieldLabel: 'Business', name: 'business' },{ fieldLabel: 'Fax', name: 'fax' }] },{ cls:'x-plain', title:'Comments', layout:'fit', items: { xtype:'htmleditor', id:'bio2', fieldLabel:'Comments' } }] }],
buttons: [{ text: 'Save' },{ text: 'Cancel' }] }); // display the form theform.render(document.body); }); </script> </head> <body> <h1>Form with Tabbed Panels and HTML editor</h1> </body> </html> Finally, don’t forget to download the Ext JS library from its official web site, by typing into your browser’s address field the following URL: http://www.extjs.com. I hope you enjoy building your own dynamic web forms as much as I did creating mine! Final thoughts It’s hard to believe, but we’ve come to the end of this series. At this point, hopefully you’ve realized how simple it is to build full-featured online forms by way of the Ext JS framework, since all of the hard work to do this is performed behind the scenes. If you’re looking for a robust package that allows you to construct professional web form in minutes, without having to be a JavaScript guru, then Ext JS might be the software that you really need. See you in the next web development tutorial! | DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
