Παρακάτω σας παραθέτω τον πηγαίο κώδικα.
Χρειαζόμαστε 2 αρχεία ένα JS και ένα HTML
Ή ενσωματώνουμε το javascript στο html.
Πιο αναλυτικά:
Source of tabstate.js:
- // vim: sw=4:ts=4:nu:nospell:fdc=4
- /*global Ext */
- /**
- * Keeping Active Tab and Window State Example by Saki
- *
- * @author Ing. Jozef Sakáloš
- * @copyright (c) 2009, by Ing. Jozef Sakáloš
- * @date 15. January 2009
- * @version $Id: tabstate.js 111 2009-01-30 01:10:43Z jozo $
- *
- * @license tabstate.js is licensed under the terms of the Open Source
- * LGPL 3.0 license. Commercial use is permitted to the extent that the
- * code/component(s) do NOT become part of another Open Source or Commercially
- * licensed development library or toolkit without explicit permission.
- *
- * License details: http://www.gnu.org/licenses/lgpl.html
- */
- Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
- // application main entry point
- Ext.onReady(function() {
- var w = new Ext.Window({
- title: Ext.fly('page-title').dom.innerHTML
- ,renderTo: Ext.getBody()
- ,width:340
- ,height:300
- ,closable:false
- ,stateId:'window'
- ,border:false
- ,layout:'fit'
- ,items:[{
- xtype:'tabpanel'
- ,activeTab:0
- ,stateId:'tabpanel'
- ,stateEvents:['tabchange']
- ,getState:function() {
- return {
- activeTab:this.items.indexOf(this.getActiveTab())
- };
- }
- ,defaults:{layout:'fit', border:false, bodyStyle:'padding:8px'}
- ,items:[{
- title:'First'
- ,html: 'First'
- },{
- title:'Second'
- ,html: 'Second'
- },{
- title:'Third'
- ,html: 'Third'
- },{
- title:'Fourth'
- ,html: 'Fourth'
- }]
- }]
- });
- w.show();
- }); // eo function onReady
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Source of tabstate.html:
- <!-- vim: ts=2:sw=2:nu:fdc=2:spell
- Keeping active tab and window position state
- @author Ing.Jozef Sakáloš
- @copyright (c) 2009, by Ing. Jozef Sakáloš
- @date 15. January 2009
- @version $Id: tabstate.html 108 2009-01-15 14:37:41Z jozo $
- @license tabstate.html is licensed under the terms of the Open Source
- LGPL 3.0 license. Commercial use is permitted to the extent that the
- code/component(s) do NOT become part of another Open Source or Commercially
- licensed development library or toolkit without explicit permission.
- License details: http://www.gnu.org/licenses/lgpl.html
- -->
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
- <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css" />
- <link rel="stylesheet" type="text/css" href="css/icons.css" />
- <link rel="shortcut icon" href="img/extjs.ico" />
- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext/ext-all-debug.js"></script>
- <script type="text/javascript" src="tabstate.js"></script>
- <title id="page-title">Keeping Active Tab and Window State by Saki</title>
- </head>
- <body>
- <div class="adsense" style="margin:4px">
- <script type="text/javascript"><!--
- google_ad_client = "pub-2768521146228687";
- /* 728x90, for examples ifram */
- google_ad_slot = "5477402227";
- google_ad_width = 728;
- google_ad_height = 90;
- //-->
- </script>
- <script type="text/javascript"
- src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
- </script>
- </div>
- <!-- delete following line if you don not want stats included -->
- <?if("examples.extjs.eu"===$_SERVER["SERVER_NAME"]){$page='tabstate';include("stats.php");}?>
- </body>
- </html>
- <!-- eof -->
ΠΗΓΗ: http://examples.extjs.eu/
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου