ExtJs 4 Border Layout: Change Margins After Render

By Vitaliy on March 19, 2013. ExtJS 4.1.1
3275
​There is a private property margin$ which we can change and update layout.

Js Code

{
    text: 'Increment Margin',
    handler: function () {
        var root = this.up('#root'),
            west = root.down('#west'),
            center = root.down('#center'),
            wm = west.margin$,
            cm = center.margin$;

        if (wm.top <= 10) wm.top++;
        if (wm.right <= 10) wm.right++;
        if (wm.bottom <= 10) wm.bottom++;
        if (wm.left <= 10) wm.left++;

        if (cm.top <= 10) cm.top++;
        if (cm.right <= 10) cm.right++;
        if (cm.bottom <= 10) cm.bottom++;
        if (cm.left <= 10) cm.left++;

        root.doLayout();
    }
}    

Simple ExtJS Wizard With Card Layout

By Vitaliy on April 05, 2012. ExtJS 4.0.7
5733
Reply to thread

Js Code

Ext.widget('panel', {
	title: 'Register New User Wizard',
	itemId: 'wizard',
	width: 400,
	height: 150,
	layout: 'card',
	defaults: {
		border: false,
		bodyPadding: 20
	},
	items: [
		{
			itemId: 'step-1',
			xtype: 'form',
			layout: 'anchor',
			defaults: { anchor: '100%' },
			items: [
				{
					xtype: 'textfield',
					fieldLabel: 'First Name',
					allowBlank: false
				},
				{
					xtype: 'textfield',
					fieldLabel: 'Last Name',
					allowBlank: false
				}
			],
			buttons: [{
				text: 'Next',
				handler: function () {
					var wizard = this.up('#wizard');
					var form = this.up('form');

					if (form.getForm().isValid()) {
						wizard.getLayout().setActiveItem('step-2');
					}
				}
			}]
		},
		{
			itemId: 'step-2',
			xtype: 'form',
			layout: 'anchor',
			defaults: { anchor: '100%' },
			items: [
				{
					xtype: 'textfield',
					inputType: 'password',
					allowBlank: false,
					fieldLabel: 'Password'
				},
				{
					xtype: 'textfield',
					inputType: 'password',
					allowBlank: false,
					fieldLabel: 'Confirmation'
				}
			],
			buttons: [{
				text: 'Create Account',
				handler: function () {
					var wizard = this.up('#wizard');
					var form = this.up('form');

					if (form.getForm().isValid()) {
						wizard.getLayout().setActiveItem('step-3');
					}
				}
			}]
		},
		{
			itemId: 'step-3',
			html: 'Account was successfully created!'
		}
	],
	renderTo: 'output'
});    

Using Card Layout

By Vitaliy on March 16, 2012. ExtJS 4.0.7
2042
Reply to thread

Js Code

Ext.onReady(function () {
	var store = Ext.create('Ext.data.TreeStore', {
		root: {
			expanded: true,
			children: [
				{ text: "Tab 1", panel: 'tab-1', leaf: true },
				{ text: "Tab 2", panel: 'tab-2', leaf: true },
				{ text: "Tab 3", panel: 'tab-3', leaf: true }
			]
		}
	});
	var cards = Ext.create('Ext.panel.Panel', {
		region: 'center', //for border layout
		margins: '5 5 5 5',
		border: false,
		layout: 'card',
		defaults: { bodyPadding: 10 },
		items: [
			{
				title: 'Tab 1',
				itemId: 'tab-1',
				html: 'Tab 1 content'
			},
			{
				title: 'Tab 2',
				itemId: 'tab-2',
				html: 'Tab 2 content'
			},
			{
				title: 'Tab 3',
				itemId: 'tab-3',
				html: 'Tab 3 content'
			}
		]
	});
	var tree = Ext.create('Ext.tree.Panel', {
		region: 'west', //for border layout
		collapsible: true,
		title: 'Menu',
		width: 200,
		store: store,
		rootVisible: false,
		margins: '5 0 5 5',
		listeners: {
			select: function (s, m) {
				cards.getLayout().setActiveItem(m.raw.panel);
			}
		}
	});
	Ext.create('Ext.panel.Panel', {
		layout: 'border',
		width: 600,
		height: 250,
		items: [
			tree,
			cards
		],
		renderTo: 'output'
	});
});