How To Change The Header's Height Of Accordion

By Vitaliy on April 08, 2012. ExtJS 4.0.7
3635
Reply to thread

Js Code

Ext.create('Ext.panel.Panel', {
	title: 'Accordion Layout',
	cls: 'my-accordion',
	width: 300,
	height: 250,
	layout: 'accordion',
	defaults: {
		bodyStyle: 'padding:10px'
	},
	items: [{
		title: 'Panel 1',
		html: 'Panel 1 content'
	}, {
		title: 'Panel 2',
		html: 'Panel 2 content'
	}, {
		title: 'Panel 3',
		html: 'Panel 3 content'
	}],
	renderTo: 'output'
});    

Get Active Item In An Accordion Layout

By Vitaliy on April 07, 2012. ExtJS 4.0.7
3485
Reply to thread

Js Code

Ext.create('Ext.panel.Panel', {
	title: 'Accordion Layout',
	width: 300,
	height: 200,
	layout: 'accordion',
	defaults: {
		bodyStyle: 'padding:10px'
	},
	tbar: [
		{
			text: 'Get Active Item',
			handler: function () {
				var expanded = this.up('panel').down('panel:not([collapsed])');
				Ext.Msg.alert('Info', Ext.String.format('Active panel is <b>"{0}"</b>', expanded.title));
			}
		}
	],
	items: [{
		title: 'Panel 1',
		html: 'Panel 1 content'
	}, {
		title: 'Panel 2',
		html: 'Panel 2 content'
	}, {
		title: 'Panel 3',
		html: 'Panel 3 content'
	}],
	renderTo: 'output'
});    

Load Accordion Panel Content On Demand

By Vitaliy on April 02, 2012. ExtJS 4.0.7
2974
Reply to thread

Js Code


Ext.onReady(function () {
       Ext.define('Ext.ux.DynamicConentPanel', {
              extend: 'Ext.panel.Panel',
              alias: 'widget.dynamicconentpanel',
              constructor: function (config) {
                     config = config || {};
                     if (config.url) {
                           config.loader = {
                                  url: config.url
                           };
                           delete config.url;
                     }
                     this.callParent([config]);
                     if (config.loader) {
                           this.on('expand', function () {
                                  if (this.conentLoaded !== true) {
                                         this.conentLoaded = true;
                                         this.loader.load();
                                  }
                           });
                     }
              }
       });

       Ext.create('Ext.panel.Panel', {
              title: 'Accordion Layout',
              width: 300,
              height: 300,
              layout: 'accordion',
              defaults: {
                     bodyStyle: 'padding:15px'
              },
              defaultType: 'dynamicconentpanel',
              layoutConfig: {
                     titleCollapse: false,
                     animate: true,
                     activeOnTop: true
              },
              items: [{
                     title: 'Panel 1',
                     html: 'Panel content!'
              }, {
                     title: 'Panel 2',
                     url: '/postdata/getcontent/1'
              }, {
                     title: 'Panel 3',
                     url: '/postdata/getcontent/2'
              }],
              renderTo: 'output'
       });
});    

Accordion Layout

By Vitaliy on March 19, 2012. ExtJS 4.0.7
2305
This is a layout that manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

Js Code

Ext.onReady(function () {
	var nav = Ext.create('Ext.panel.Panel', {
		title: 'Accordion Layout',
		region: 'west', //for border layout
		width: 250,
		height: 300,
		layout: 'accordion',
		margins: '5 0 5 5',
		items: [
			{
				xtype: 'treepanel',
				title: 'Menu Tree 1',
				rootVisible: false,
				root: {
					expanded: true,
					children: [
						{ text: "detention", leaf: true },
						{
							text: "homework", expanded: true, children: [
								{ text: "book report", leaf: true },
								{ text: "algebra", leaf: true }
							]
						},
						{ text: "buy lottery tickets", leaf: true },
						{ text: "buy lottery tickets", leaf: true },
						{ text: "buy lottery tickets", leaf: true },
						{ text: "buy lottery tickets", leaf: true },
						{ text: "buy lottery tickets", leaf: true }
					]
				}
			},
			{
				xtype: 'treepanel',
				title: 'Menu Tree 2',
				rootVisible: false,
				root: {
					expanded: true,
					children: [
						{ text: "detention", leaf: true },
						{
							text: "homework", expanded: true, children: [
								{ text: "book report", leaf: true },
								{ text: "algebra", leaf: true }
							]
						},
						{ text: "buy lottery tickets", leaf: true }
					]
				}
			},
			{
				xtype: 'treepanel',
				title: 'Menu Tree 3',
				rootVisible: false,
				root: {
					expanded: true,
					children: [
						{ text: "detention", leaf: true },
						{ text: "homework", leaf: true },
						{ text: "book report", leaf: true },
						{ text: "algebra", leaf: true },
						{ text: "buy lottery tickets", leaf: true }
					]
				}
			}
		]
	});

	var main = Ext.create('Ext.panel.Panel', {
		region: 'center', //for border layout
		title: 'Main Panel',
		bodyPadding: 10,
		html: 'html content',
		margins: '5 5 5 5'
	});

	Ext.create('Ext.panel.Panel', {
		layout: 'border',
		width: 600,
		height: 250,
		items: [
			nav,
			main
		],
		renderTo: 'output'
	});
});