Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

How to keep expanded state of Accordion items

April 4, 2008 by saki 1 Comment

Code in this post can be obsolete, however, principles and theory may still apply.
One of the possible solutions is: Stateful Accordion:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- 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 -->
  • 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:
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

Filed Under: Know-how Tagged With: accordion, extjs, javascript, Know-how, layout, state

Comments

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

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in