Viewport With Accordion In Center

Posted By Vitaliy | April 26, 2012 | ExtJS 4.1.0
0 5531
Reply to thread

Js Code

Ext.widget({
	xtype: 'viewport',
	layout: 'border',
	items: [
		{
			title: 'north',
			region: 'north',
			margins: '5 5 0 5',
			height: 100
		},
		{
			region: 'west',
			title: 'west',
			margins: '5 0 5 5',
			width: 250,
			split: true
		},
		{
			title: 'center',
			region: 'center',
			margins: '5 5 5 0',
			layout: 'accordion',
			defaults: {
				bodyPadding: 10
			},
			items: [
				{
					xtype: 'panel',
					title: 'Panel 1',
					html: 'Html content 1'
				},
				{
					xtype: 'panel',
					title: 'Panel 2',
					html: 'Html content 2'
				},
				{
					xtype: 'panel',
					title: 'Panel 3',
					html: 'Html content 3'
				}
			]
		}
	]
});
            

How To Change The Header's Height Of Accordion

Posted By Vitaliy | April 08, 2012 | ExtJS 4.0.7
0 4497
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: Ext.getBody()
});
            

Get Active Item In An Accordion Layout

Posted By Vitaliy | April 07, 2012 | ExtJS 4.0.7
0 4190
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: Ext.getBody()
});
            

Accordion Panel With Dynamic Content In ExtJS 4 MVC App

Posted By Vitaliy | April 05, 2012 | ExtJS 4.0.7
0 3871
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	views: ['AccordionPanel'],
	init: function () {
		this.control({
			'accordionpanel > panel': {
				expand: this.onPanelExpand
			}
		});
	},
	onPanelExpand: function (panel) {
		if (panel.contentLoaded !== true && panel.name != 'panel-1') {
			panel.contentLoaded = true;

			var url;

			switch (panel.name) {
				case 'panel-2': url = '/postdata/getcontent/2'; break;
				case 'panel-3': url = '/postdata/getcontent/3'; break;
			}

			if (url) {
				Ext.Ajax.request({
					url: url,
					success: function (response) {
						panel.update(response.responseText);
					}
				});
			}
		}
	}
});
            

Load Accordion Panel Content On Demand

Posted By Vitaliy | April 02, 2012 | ExtJS 4.0.7
0 3614
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: Ext.getBody()
       });
});