Continue to the previous section...
1. extjs5.0 menu.
-Import the extjs package to the menupage.html page.
2. MVC Framework of extjs used in the previous section
-Create app folders in the root directory, and create controllers, models, stores, and view folders in the folders.
-Create an app. js file in the root directory
-Create a mainlayout. js file in the view folder.
-Create a maincontroller. js file in the Controller folder.
3. menu page layout
-Mainlayout. JS Code
Ext. define ('zzh. view. mainlayout ', {extend: 'ext. panel. panel ', alias: 'widget. mainlayout ', layout: 'border', initcomponent: function () {// var toppanel = ext. create ('ext. panel. panel ', {region: 'north', split: false, margins: '0 0 0 0'}); // left var leftpanel = ext. create ('ext. tab. panel ', {layout: 'fit', tabposition: 'left', Region: 'west', ID: 'tabbar', alias: 'tabbar', width: 400, items: [{Title: 'menu 1'}, {Title: 'menu 2'}, {Title: 'menu 3'}, {Title: 'menu 4'}, {Title: 'menu 5' },{ title: 'menu 6' },{ title: 'menu 7'}]}); // center var centerpanel = ext. create ('ext. panel. panel ', {}); // var resultpanel on the right; this. items = [leftpanel, centerpanel, resultpanel]; this. callparent (arguments );}});
-Maincontroller. JS Code
Ext.define(‘ZZH.controller.MainController‘, { extend: ‘Ext.app.Controller‘, init: function (app) { this.control({ }); }, views: [‘MainLayout‘]});
4.add mainlayoutinto menupage.html and load the map
-App. JS Code
-Introduce app.js to menupage.html
Ext.application({ name: ‘ZZH‘, appFolder: ‘../app‘, controllers: [ ‘MainController‘ ], launch: function () { Ext.create(‘Ext.container.Viewport‘, { layout: ‘fit‘, autoload: true, items: [ { xtype: ‘mainLayout‘ } ], listeners: { afterrender: { fn: function (vp, eOpts) { setTimeout(‘CreateSGWord()‘, 1); } } } }); }});
-Note that the createsgword () function is used to write the object control in the skymap. js file.
Document. getelementbyid ("terraexplorerx"). setattribute ("classid", "CLSID: 3a4f9192-65a8-11d5-85c1-0001023952c1 ");
However, we added IFRAME and the structure changed. The Code also needs to be changed a bit.
Skymap. JS Code
// Page initialization function createsgword () {extends parent.doc ument. getelementbyid ("terraexplorerx "). setattribute ("classid", "CLSID: 3a4f9192-65a8-11d5-85c1-0001023952c1"); Specify parameter parent.doc ument. getelementbyid ("terraexplorerx "). style. display = "Block"; sgworld = document. createelement ("object"); sgworld. id = "SG"; sgworld. classid = "CLSID: 3a4f9197-65a8-11d5-85c1-0001023952c1"; sgworld. open ("http: // 10.95.90.46/dlprj/Dalian jiucheng 3.fly ");}
5. Run
6. Now we noticed that when we click the menu page and then click the map, the map will overwrite the menu (which is a headache)
-Unrelated. We changed the code in menupage.html to the following.
<! Doctype HTML> <HTML xmlns = "http://www.w3.org/1999/xhtml">
7. Run it again and the menu will never disappear .. ^
8. Conclusion
Putting the HTML control on the object control is really a headache for me for a while, but it still solves the problem. I believe there is a better way,
There is a better way to tell me and learn from each other .. ^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
