<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Saki's Blog &#187; state</title>
	<atom:link href="http://blog.extjs.eu/tag/state/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.extjs.eu</link>
	<description>For good of all productive developers</description>
	<lastBuildDate>Mon, 16 Aug 2010 23:12:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to keep expanded state of Accordion items</title>
		<link>http://blog.extjs.eu/know-how/how-to-keep-expaded-state-of-accordion-items/</link>
		<comments>http://blog.extjs.eu/know-how/how-to-keep-expaded-state-of-accordion-items/#comments</comments>
		<pubDate>Fri, 04 Apr 2008 12:48:48 +0000</pubDate>
		<dc:creator>Saki</dc:creator>
				<category><![CDATA[Know-how]]></category>
		<category><![CDATA[accordion]]></category>
		<category><![CDATA[extjs]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[state]]></category>

		<guid isPermaLink="false">http://blog.extjs.eu/?p=19</guid>
		<description><![CDATA[<br/>One of the possible solutions is:

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
&#60;!-- vim: ts=2:sw=2:nu:fdc=2:spell
&#160;
Keeping Expanded State of Accordion Item Example
&#160;
@author    Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date      4. April 2008
@version   $Id$
&#160;
@license example.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent [...]]]></description>
			<content:encoded><![CDATA[<br/><p>One of the possible solutions is:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">&lt;!-- vim: ts=2:sw=2:nu:fdc=2:spell</span>
&nbsp;
<span style="color: #808080; font-style: italic;">Keeping Expanded State of Accordion Item Example</span>
&nbsp;
<span style="color: #808080; font-style: italic;">@author    Ing.Jozef Sakáloš</span>
<span style="color: #808080; font-style: italic;">@copyright (c) 2008, by Ing. Jozef Sakáloš</span>
<span style="color: #808080; font-style: italic;">@date      4. April 2008</span>
<span style="color: #808080; font-style: italic;">@version   $Id$</span>
&nbsp;
<span style="color: #808080; font-style: italic;">@license example.html is licensed under the terms of the Open Source</span>
<span style="color: #808080; font-style: italic;">LGPL 3.0 license. Commercial use is permitted to the extent that the </span>
<span style="color: #808080; font-style: italic;">code/component(s) do NOT become part of another Open Source or Commercially</span>
<span style="color: #808080; font-style: italic;">licensed development library or toolkit without explicit permission.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">License details: http://www.gnu.org/licenses/lgpl.html</span>
&nbsp;
<span style="color: #808080; font-style: italic;">--&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../ext/resources/css/ext-all.css&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;theme&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;empty.css&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../css/icons.css&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../css/application.css&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;shortcut icon&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../img/extjs.ico&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../ext/adapter/ext/ext-base.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;../ext/ext-all-debug.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
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: [&quot;collapse&quot;,&quot;expand&quot;]
            ,getState:function() {
                return {collapsed:this.collapsed};
            }
        }
        ,items:[{
             stateId:'first'
            ,title:'First'
            ,html: 'First'
        },{
             stateId:'second'
            ,title:'Second'
            ,html: 'Second'
        }]
    });
});  
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;title&quot;</span>&gt;</span>Keeping Accordion Item Expanded State<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
<span style="color: #808080; font-style: italic;">&lt;!-- eof --&gt;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.extjs.eu/know-how/how-to-keep-expaded-state-of-accordion-items/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
