Building an RTF-capable Form with the Ext JS Framework - Adding an HTML editor to a multi-tabbed web form (Page 3 of 4 ) As I mentioned in the previous section, my purpose here is to demonstrate how to use the Ext JS library to build a multi-tabbed web form that also incorporates a useful HTML editor. To accomplish this task, again I’m going to use an instance of the “FormPanel” JavaScript class that you saw in the prior example, which also will include an HTML editing text box. Having explained that, please take a look at the following JavaScript snippet, which is tasked with rendering this multi-tabbed online form. Here it is: 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); }); Undoubtedly, if you examine in detail the above JavaScript segment of code, you’ll have to agree with me that it’s pretty easy to follow. As you can see, in this case the web form is built by feeding the constructor of the “FormPanel” class the proper input parameters, which have been utilized in previous examples as well. However, apart from the aforementioned incoming arguments, you should pay attention to the JavaScript code that actually incorporates an HTML editor into the respective web form. Here’s where the magic happens: xtype:'htmleditor',
Undeniably, the above JavaScript statement demonstrates in a nutshell the impressive capabilities of the Ext JS library, particularly when it comes to constructing dynamic user interfaces with minor efforts. As you can see in this specific case, this single parameter is enough to include a complete rich text editor into the online form being created. That’s pretty impressive, isn’t it? Of course, in order to complement the previous hands-on example, you’ll need to see how this multi-tabbed web form looks. Below I included a screen capture, which shows its visual appearance quite clearly: 
Well, now that you hopefully learned the basic concepts that surround the creation of a dynamic web form that incorporates some helpful text editing capabilities, by means of the Ext JS framework, it’s time to show the complete source code that corresponds to this web application, including all of the CSS and JavaScript dependencies required to make it work as expected. Therefore, in the concluding section of this tutorial, I’m going to embed all of the JavaScript code listed previously into a simple (X)HTML file. In this way you can have it available at one single place, in case you want to introduce your own modifications. Please, go ahead and read the next few lines. We’re almost done! Next: The application’s complete source code >>
More JavaScript Articles
More By Alejandro Gervasio |
