Extjs3.2 The writing of custom components __js

Recently participated in the project used ExtJS, studied for several days, found that the actual development of a variety of layout components are used together as a custom component to improve code reuse.

In the project ' Add user ' function, because the user information is more, also may want to register its account information, therefore wants to add the time to fill in the final submission.

Flipping through the Extjs3.2 example found components that did not meet the requirements. So I tried to write one. I call it stepform for the time being.

1.Extjs can simulate the integration relationships in Java, allowing custom ' classes ' to be integrated from ExtJS ' classes ', such as ext. Panel,ext.window and so on.

So the first step is to create a new Stemform.js file and then use Ext.extend (ext.panel,{}) to integrate the Panel in EXT.

EXT.NS ("Util"); Util.stepform = Ext.extend (ext.panel,{//rewrite constructor, conf is a custom parameter constructor:function (conf) {},//Custom Function Register:function ( ){} ))

2. Rewrite the constructor of the panel constructor, write Util.StepForm.superclass.constructor.apply (this,[{...}) in the function To submit a custom parameter.

Constructor:function (conf) {var items = Conf.items;//Click on the different forms that the left link can switch, var number = Conf.number;//list shows numbers/// Util.StepForm.superclass.constructor.apply (this,[{//Here is the layout or element you want to customize, because the class itself inherits from Ext.panel, so it can also add and lay out multiple subassemblies. Width:conf.width, Height:conf.height, layout: ' Border ', items:[new Ext.panel ({id: ' nav ', title:ltitle, Region: ' West ', Width:navwidth, Html:link}),//... Omitted]}); Several operations omitted}

3. When the custom Stepform class is written, you can use the var stepform = new Util.stepform ({}) in the same way that you use the Ext itself component;

Finally I output the complete code:

Stepform.js:

EXT.NS ("Util"); Util.stepform = Ext.extend (ext.panel,{constructor:function (conf) {var items = Conf.items;//Click on the left link to switch between different forms, Var Number = Conf.number; Whether the list displays the number var activetab = Conf.activetab; Default activity label at load var ltitle = Conf.ltitle; Z left title var rtitle = Conf.rtitle; Right title var navwidth = Conf.navwidth; Width of the navigation bar var count = Activetab; Records the index of the currently active item if (activetab>items.length-1) {alert ("Activetab value is greater than the number of items"); return; var link = ""; Displayed on the left of the list HTML content var bodys = new Array (); for (var i=0 i<items.length; i++) {var item = Items[i]; if (number) {if (Activetab = i) {link = "<a id= ' ALink" +i+ "" href= "javascript:void (0)" mce_href= "javascript:void (0)" style= "display:block;cursor:pointer;padding:5px 10px; Text-decoration:none;font-size:14px;font-weight:bold "mce_style=" display:block;cursor:pointer;padding:5px 10px; Text-decoration:none;font-size:14px;font-weight:bold ">" + (i+1) + "." +item.title+ "</a><br/>"; }else{link + = "<a id= ' ALink" +i+ "' href=" javascript:void (0) "Mce_href= "javascript:void (0)" style= "display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px "Mce_style=" display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px ">" + (i+1) + "." +item.title+ "</a><br/>"; }}else{if (Activetab = = i) {link = "<a id= ' ALink" +i+ "' href= ' javascript:void (0)" mce_href= "javascript:void (0)" style = "display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" mce_style= "Display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" > "+ Item.title+ "</a><br/>"; }else{link + = "<a id= ' ALink" +i+ "href=" javascript:void (0) "mce_href=" javascript:void (0) "style=" Display:block; cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px "mce_style=" display:block;cursor:pointer; padding:5px 10px;text-decoration:none;font-size:12px ">" +item.title+ "</a><br/>"; }///collect form to bodys array var forms = Item.items; If!forms) {alert ("Missing items attribute"); return; var form = item.items[0]; form.id = "form" +i; if (Activetab!= i) {Form.hidden = true;} else{Form.hidden = false;} bodys.push (form); Util.StepForm.superclass.constructor.apply (this,[{width:conf.width, height:conf.height, layout: ' Border ', items:[ New Ext.panel ({id: ' nav ', title:ltitle, Region: ' West ', Width:navwidth, Html:link}), new Ext.panel ({title:rtitle, height : conf.height, layout: ' Fit ', Region: ' Center ', Items:bodys}, new Ext.panel ({autoheight:true, Region: ' South ', bbar:new Ext.toolbar ([{xtype: ' Tbfill '}, {xtype: ' button ', id: ' prev ', text: ' Previous ', Handler:function () {navfun (count-1);}}, { Xtype: ' button ', ID: ' Next ', Text: ' Next ', Handler:function () {navfun (count+1);} ]) }) ] }] ); var navfun = function (index) {if (Index < 0) {index = 0; count = 0;} if (Index > bodys.length-1) {index = Bodys.leng Th-1; Count = bodys.length-1; for (var i=0 i<bodys.length; i++) {if (i = = index) {ext.getcmp ("form" +i). Show (true); Ext.get ("ALink" +i). DOM.STyle.fontsize = "14px"; Ext.get ("ALink" +i). Dom.style.fontWeight = "bold"; }else{ext.getcmp ("form" +i). Hide (True); Ext.get ("ALink" +i). Dom.style.fontSize = "12px"; Ext.get ("ALink" +i). Dom.style.fontWeight = "normal"; } count = index; }; This.bodys = Bodys; This.activetab = Activetab; This.navigate = Navfun; }, Register:function () {var activeitem = ext.get ("ALink" +this.activetab). dom.innerhtml; var delegate = this.navigate;// Add a click event for the left navigation (var i=0; i<this.bodys.length; i++) {ext.get ("ALink" +i). On ("click", Function (e) {var i = E.target.id.substring (5); Delegate (i); }); } } }); Ext.reg (' Stepform ', util.stepform);

Index.jsp

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

Effect Chart: