One of the possible solutions is:
Stateful Accordion:
<!-- vim: ts=2:sw=2:nu:fdc=2:spell
Keeping Expanded State of Accordion Item Example
@author Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date 4. April 2008
@version $Id$
@license example.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="empty.css">
<link rel="stylesheet" type="text/css" href="../css/icons.css">
<link rel="stylesheet" type="text/css" href="../css/application.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">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.onReady(function(){
var p = new Ext.Panel({
title: Ext.fly('title').dom.innerHTML
,renderTo: Ext.getBody()
,layout: 'accordion'
,width:400
,height:400
,defaults: {
stateEvents: ["collapse","expand"]
,getState:function() {
return {collapsed:this.collapsed};
}
}
,items:[{
stateId:'first'
,title:'First'
,html: 'First'
},{
stateId:'second'
,title:'Second'
,html: 'Second'
}]
});
});
</script>
<title id="title">Keeping Accordion Item Expanded State</title>
</head>
<body>
</body>
</html>
<!-- eof -->
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - June 27, 2019
- The Site Resurgence - February 11, 2018
- Configuring ViewModel Hierarchy - June 19, 2015