EXT rich client backend management system preliminary code is provided to everyone < html> <%$ sitename%> <%*Loaded Extjs resource file--Start*%> <%*Loaded Extjs resource file -- end*%> <% *JS area of execution block--Start*%> <br>//Specific development--BJExtreme class<br>BJExtreme= function(){}; <br>BJExtreme.prototype.getAuthor = function(){ <br>return 'Xu Xiaohan' ; <br>} <br>BJExtreme.prototype.getVersion = function(){ <br>return 'August 13, 2008 17:00'; <br>} <br>BJExtreme.prototype.getController = function(){ <br>return 'index.php' ; <br>} <br>BJExtreme.prototype.buildLinkStr = function(ctl, act){ <br>if (ctl == undefined) <br>return BJExtreme.prototype.getController() ; <br>if (act == undefined) <br>act = null ; <br>return BJExtreme.prototype. getController() '?ctl=' ctl '&act=' act ; <br>} <br>BJExtreme.prototype.showWindow = function(title1,width1,height1,html1){ <br>if (this.win == undefined ){ <br>this.win = new Ext.Window({ <br>title: title1, <br>width: width1, <br>height: height1, <br>html: html1 <br>}); <br>} <br>else { <br>this.win.close(); <br>this.win = new Ext.Window({ <br>title: title1, <br>width: width1, <br>height: height1 , <br>html: html1 <br>}); <br>} <br>this.win.show(); <br>} <br>/*Encapsulate the UI components that appear separately*/ <br> BJExtreme.prototype.ui = function(){} ; <br>BJExtreme.prototype.ui.mainTopic = { <br>title: 'Beijing Extreme Backend Management', region: 'north' , <br>html: '< embed src="<%$prj_dir%>/swf/top_title.swf" quality="high" type="application/x-shockwave-flash" width="450" height="50"></ embed>' <br>}; <br>/*Left menu item operation--Start*/ <br>//Define the menu bar object in the initial state <br>BJExtreme.prototype.ui.menuBar = { <br>xtype: 'treepanel' , <br>title: 'menu',region: 'west',width: 200 ,collapsible: true , <br>loader: null , root: null ,rootVisible: true , listeners: null <br>}; <br>//Travel related<br>BJExtreme.prototype.ui.menuBar.Traveling = { <br>text: 'Travel' , <br>leaf: false , // Set this to false to display the file Clip icon, true will display single item icon <br>children: null <br>}; <br>BJExtreme.prototype.ui.menuBar.Traveling.children = [ <br>{text: 'Beijing',leaf: true ,ctl : 'Peking',act: ''}, <br>{text: 'Tibet' ,leaf: true ,ctl: 'Tibet' ,act: ''}, <br>{text: 'Thailand' ,leaf: true }, <br>{text: 'Shangrila',leaf: true,ctl:'Shangrila',act: ''} <br>]; <br>//Tibetan medicine related<br>BJExtreme.prototype.ui.menuBar. Mibetdoctor = { <br>text: 'Tibetan Medicine' , <br>leaf: false , <br>children: null <br>}; <br>BJExtreme.prototype.ui.menuBar.Mibetdoctor.children = [ <br>{ text: 'History of Tibetan Medicine',leaf: true}, <br>{text: 'Tibetan Medicine Theory' ,leaf: true}, <br>{text: 'Diagnosis' ,leaf: true}, <br>{text: ' Disease',leaf: true}, <br>{text: 'Treatment',leaf: true} <br>]; <br><br>//Dive<br>BJExtreme.prototype.ui.menuBar.ping = { <br>text: 'Diving' , <br>leaf: false , <br>children: null <br>}; <br>//Mountain climbing<br>BJExtreme.prototype.ui.menuBar.Mountain = { <br> text: 'Mountain climbing' , <br>leaf: false , <br>children: null <br>}; <br>//Rock climbing<br>BJExtreme.prototype.ui.menuBar.Rockclimbe = { <br>text: ' Rock climbing' , <br>leaf: false , <br>children: null <br>}; <br>//Hiking<br>BJExtreme.prototype.ui.menuBar.Onfoot = { <br>text: 'Hiking' , <br>leaf: false , <br>children: null <br>}; <br>//Motorcycle<br>BJExtreme.prototype.ui.menuBar.Motorcycle = { <br>text: 'Motorcycle' , <br>leaf: false , <br>children: null <br>}; <br>//Modules integrated in the project<br>BJExtreme.prototype.ui.menuBar.ModuleInProject = { <br>text: 'Integrated in the project module' , <br>leaf: false , <br>children: null <br>}; <br>BJExtreme.prototype.ui.menuBar.ModuleInProject.children = [ <br>{ <br>text: 'Interactive prompt strip',leaf: true,ctl: 'ExtjsStudy',act: 'linkTips', <br>//This operation has a higher priority than the general listening controller below<br>listeners:{click: function (n){window.open(BJExtreme.prototype.buildLinkStr(n.attributes.ctl,n.attributes. act));return false ;}} <br>} <br>]; <br>//Initialize menu item element information--This must be in--The current menu is generated using the asynchronous tree component, and other different ones can be added in the future Implementation of <br>BJExtreme.prototype.ui.menuBar.loader = new Ext.tree.TreeLoader(); <br>BJExtreme.prototype.ui.menuBar.root = new Ext.tree.AsyncTreeNode({ <br>expanded: true , <br>children: [ <br>BJExtreme.prototype.ui.menuBar.Traveling , <br>BJExtreme.prototype.ui.menuBar.Mibetdoctor , <br>BJExtreme.prototype.ui.menuBar.ping , <br> BJExtreme.prototype.ui.menuBar.Mountain , <br>BJExtreme.prototype.ui.menuBar.Rockclimbe , <br>BJExtreme.prototype.ui.menuBar.Onfoot , <br>BJExtreme.prototype.ui.menuBar.Motorcycle , <br>BJExtreme.prototype.ui.menuBar.ModuleInProject <br>] <br>}); <br>//Define a simple response event<br>BJExtreme.prototype.ui.menuBar.listeners = { <br>click : function (n) //n.attributes can obtain the objects in the children of AsyncTreeNode <br>{ <br>if (n.attributes.leaf == true) //Leaf options <br>{ <br>//n .attributes.text n.attributes.leaf <br>var ctlStr = BJExtreme.prototype.buildLinkStr(n.attributes.ctl,n.attributes.act); <br>myextreme.showWindow('Current Controller',400,300,ctlStr ) ; <br>} <br>else //Contains submenu<br>{ <br>//not to do <br>} <br>} <br>}; <br>//End of menu options<br>//Main content panel <br>BJExtreme.prototype.ui.contentPane = { <br>id: "main_content", xtype: "tabpanel" , region: 'center' ,items: [{title: 'Main content panel' }] <br>}; <br>//Status Bar<br>BJExtreme.prototype.ui.statusBar = { <br>xtype: "tabpanel" , region: 'south' ,items: [{title: 'Status Bar '}] <br>}; <br>BJExtreme.prototype.buildMainPane = function(BJExtremeObj){ <br>//Ext.Viewport is used to render objects into the body block in the page, and will automatically change for each page Only one <br>this.mainPane = new Ext.Viewport({ <br>enableTabScroll: true , <br>layout: 'border', //If set to fit, the composite panel cannot be displayed <br>items: [ <br>BJExtremeObj.ui.mainTopic, <br>BJExtremeObj.ui.menuBar , <br>BJExtremeObj.ui.contentPane , <br>BJExtremeObj.ui.statusBar <br>] <br>}) ; <br>} <br> var myextreme = new BJExtreme(); <br>Ext.onReady( <br>function(){ <br>//Ext.MessageBox.alert('BJExtreme Version',myextreme.getVersion()); <br>// Ext.MessageBox.alert('BJExtreme Version',myextreme.buildLinkStr('t','b')); <br>myextreme.buildMainPane(myextreme) ; <br>} <br>); <br></ script> <br><%*JS area of the execution block--end*%> <br></head> <br><body> <br><!-- //Page neutron navigation Menu--> <br><br></body> <br></html></p>