Learn from Saki: How to keep expanded state of Accordion items

Code in this post can be obsolete, however, principles and theory may still apply.

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 -->

<!-- vim: ts=2:sw=2:nu:fdc=2:spell

Keeping Expanded State of Accordion Item Example

@author 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>

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>

Author
Recent Posts

Follow me:

saki

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.

Follow me:

Comments

iphone5 カバーオシャレ says

January 18, 2014 at 2:47 am

ide assets with regard to global clients searching for superlatively and also cost-effective chunks of money locally plus overseas. Medical nowadays is focused on options and also handiness. How to keep expanded state of Accordion items | Saki’s Blog All of us iphone5 カバーオシャレ usually are very pleased in order to page Nike jordans Hospi.

Log in to Reply

How to keep expanded state of Accordion items

Membership

Support

Legal

Comments

We will be happy to hear back from you Cancel reply

Membership

Support

Legal