ext 布局3
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"></link>
<link rel="stylesheet" href="../css/button.css"></link>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../ext/ExtJS.ux/UploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="../js/jsloader.js"></script>
<script type="text/javascript" src="../ext/ext_group.js"></script>
<script>
Ext.onReady(function(){
Ext.get("div1").shift({width:800,height:500,x:200,y:10,opacity:1,duration:3});
var aa = function(){
return new Ext.form.FormPanel({
title:"panel",
width:600,
autoHeight:true,
height:300,
frame:true,
items:[{
layout:"column",
items:[
{
layout:"form",
xtype:"fieldset",
labelWidth:50,
autoHeight:true,
title:"fieldset",
columnWidth:.5,
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
},{
xtype:"textfield",
fieldLabel:"text1",
width:50
}
]
},{
layout:"form",
labelWidth:50,
columnWidth:.5,
items:[{
xtype:"textfield",
fieldLabel:"text2",
width:200
}]
},{
layout:"form",
labelWidth:50,
columnWidth:.3,
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
labelWidth:50,
columnWidth:.4,
items:[
{
xtype:"textfield",
fieldLabel:"te1"
},{
xtype:"textfield",
fieldLabel:"te1"
},{
xtype:"textfield",
fieldLabel:"te1"
}
]
},{
layout:"form",
labelWidth:50,
columnWidth:.3,
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
labelWidth:50,
columnWidth:1,
autoHeight:true,
xtype:"fieldset",
title:"fieldset2",
items:[{
xtype:"ux-radiogroup",
fieldLabel:"radio",
horizontal:true,
radios:[{
boxLabel:"radio1",
value:1
},{
boxLabel:"radio2",
value:2
}
]
}]
},{
layout:"form",
xtype:"fieldset",
labelWidth:50,
autoHeight:true,
title:"fieldset",
columnWidth:.5,
items:[
{
layout:"column",
items:[
{
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
}]
},{
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"text1",
width:50
}]
}
]
}
]
}
]
}]
});
};
var cc = new Ext.TabPanel({
width:800,
autoHeight:true,
activeItem:0,
renderTo:"div1",
layoutOnTabChange:true,
items:[
{
title:"sky",
//layout:"fit",
layout:"fit",
// height:400,
autoHeight:true,
items: aa()
},{
title:"infi",
autoHeight:true,
//layout:"fit",
items: aa()
},{
title:"fly",
autoHeight:true,
//layout:"fit",
items: aa()
}
]
});
});
</script>
</head>
<body>
<div id="div1" style="background:pink"></div>
</body>
</html>