ExtJs – Menempatkan Label Ditengah Container

ExtJs telah menyediakan berbagai jenis layout yang bila kita mengetahui penggunaanya maka akan sangat berguna.
Termasuk dalam memposisikan suatu label di tengah container.
Ada 2 macam tengah yang saya maksud disini.

Pertama yakni tengah dari width suatu container.
Cara ini akan memposisikan label ditengah secara horizontal namun tidak secara vertical.
Jika ini yang anda inginkan maka anda bisa menggunakan layout hbox dengan setting pack : center dan align : center.
atau anda bisa juga menggunakan layout table dengan mensetting tdAttr ke width 100% dan menambahkan style text-align:center/middle.

{
	xtype : 'container',

	layout: {
		type: 'hbox',
		pack: 'center',
		align: 'center'
	},

	items : [{
		xtype : 'label',
		text : 'Label Di tengah Width Container',
	}]
}

Kedua jika anda menginginkan label berada di tengah width dan height suatu container.
Anda bisa menggunakan layout vbox dengan setting pack : center dan align : center.

{
	xtype : 'container',

	layout: {
		type: 'vbox',
		pack: 'center',
		align: 'center'
	},

	items : [{
		xtype : 'label',
		text : 'Label Di tengah Width dan Height Container',
	}]
}

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s