The Absolute Layout class is a subclass of Anchor Layout, and that is why it inherits the anchoring feature from its mother class. Like the Anchor Layout, the Absolute Layout also allows you to set an x and y configuration, which means the location of the Component will be located in its parent's body.
Let's try to add a Panel in a Window using the Absolute Layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 Absolute Layout Example</title>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: 'x: 10; y: 10 - anchor: 80% 80%',
anchor:'80% 80%',
x: 10,
y: 10
});
var absolute = Ext.create('Ext.window.Window', {
title: 'Absolute Layout Example - Tutorial Jinni',
width: 300,
height: 200,
layout:'absolute',
defaults: {
bodyStyle: 'padding:10px'
},
items: [panel1]
});
absolute.show();
});
</script>
</head>
<body>
</body>
</html>
In the preceding code, we have a Window with a title, width(300 pixels), height (200 pixels), using the Absolute Layout. This Window contains only one Panel as the child item.
The panel we declared as the Window item is panel1. This panel has a title and HTML content. We set the anchor as 80%of the parent's width and 80%of the parent's height. We also set the position of panel1 in its parent's body, which is x=10 and y =10.
The code output will be as follows:
0 comments:
Post a Comment