в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:30Z

1 версия

Новая страница

==Managing history for multiple components within the page==



<source lang="html4strict">


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function() {

// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();

// Needed if you want to handle history for multiple components in the same page.
// Should be something that won"t be in component ids.
var tokenDelimiter = ":";

var tp = new Ext.TabPanel({
renderTo: Ext.getBody(),
id: "main-tabs",
height: 300,
width: 600,
activeTab: 0,

items: [{
xtype: "tabpanel",
title: "Tab 1",
id: "tab1",
activeTab: 0,
tabPosition: "bottom",

items: [{
title: "Sub-tab 1",
id: "subtab1"
},{
title: "Sub-tab 2",
id: "subtab2"
},{
title: "Sub-tab 3",
id: "subtab3"
}],

listeners: {
"tabchange": function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},{
title: "Tab 2",
id: "tab2"
},{
title: "Tab 3",
id: "tab3"
},{
title: "Tab 4",
id: "tab4"
},{
title: "Tab 5",
id: "tab5"
}],

listeners: {
"tabchange": function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we"re managing history for it also.
// We"ll use its handler instead in that case so we don"t get duplicate nav events for sub tabs.
if(tab.id != "tab1"){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});

// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on("change", function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];

tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// This is the initial default state. Necessary if you navigate starting from the
// page without any existing history token params and go back to the start state.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});

});
</script>


<form id="history-form" class="x-hidden">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
</body>
</html>

</source>

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)

JavaScript DHTML/Ext JS/History - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия