extjs 布局（column&form)
<%@ 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>
<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/ext_group.js"></script>
<script>
Ext.onReady(function (){
Ext.get("div1").shift({width:1000,height:700,x:100,y:10,opacity:1,duration:3});
/*交退费添加window函数*/
//window
win = function(){
new Ext.Window(
{
title:"交退费信息",
id:"win1",
width:700,
autoHeight:true,
frame:true,
closeAction:"close",
bodyStyle:{padding:"10px"},
items:[
new Ext.form.FormPanel(
{
frame : true,
autoWidth:true,
autoHeight:true,
labelAlign : 'right',
autoScroll : true,
// layout:'fit',
labelAlign : 'right',
items:[
{
layout:"column",
items:[
{
xtype:"fieldset",
title:"fdf",
columnWidth:.6,
height:100,
autoHeight:true,
layout:"form",
items:[
{
layout:"column",
items:[
{
layout:"form",
columnWidth:.5,
items:[{
xtype:"textfield",
fieldLabel:"fdd",
width:80
} ]
},{
layout:"form",
columnWidth:.5,
items:[{
xtype:"ux-radiogroup",
name:"sexgroup",
fieldLabel:"性别",
horizontal:true,
radios:[{
name:"sex",
boxLabel:"男",
value:"男"
},{
name:"sex",
boxLabel:"女",
value:"女"
}]
} ]
}
]
},{
xtype:"textfield",
fieldLabel:"fdd"
},{
xtype:"textfield",
fieldLabel:"fdd"
},{
xtype:"radiogroup",
name:"sexgroup",
fieldLabel:"性别",
items:[{
name:"sex",
xtype:"radio",
boxLabel:"男",
inputValue:"男"
},{
name:"sex",
xtype:"radio",
boxLabel:"女",
inputValue:"女"
}]
}
]
},{
xtype:"fieldset",
title:"fdf",
columnWidth:.4,
height:100,
items:[
{
layout:"form",
items:[
{
xtype:"textfield",
fieldLabel:"fdd"
},{
xtype:"textfield",
fieldLabel:"fdd"
}
]
}
]
},{
xtype:"fieldset",
title:"fdf",
columnWidth:.4,
height:100,
items:[
{
layout:"form",
items:[
{
xtype:"radiogroup",
name:"sexgroup",
fieldLabel:"性别",
items:[{
name:"sex",
xtype:"radio",
boxLabel:"男",
inputValue:"男"
},{
name:"sex",
xtype:"radio",
boxLabel:"女",
inputValue:"女"
}]
}
]
}
]
}
]
},
{
layout:"column",
xtype:"fieldset",
title:"fdf",
height:100,
items:[
{
layout:"form",
columnWidth:.8,
items:[{
xtype:"textfield",
fieldLabel:"fd"
},{
xtype:"textfield",
fieldLabel:"fd"
},{
xtype:"textfield",
fieldLabel:"fd"
}
]
}
]
}
],
autoScroll : true,
buttons:[{
xtype:'button',
text:'保存',//保存
iconCls:'save',
handler:function(){
}
}
,
{
text:"取消",
xtype:'button',
iconCls:'clear',
handler:function(){
var window1 = Ext.getCmp("win1");
if(window1){
window1.close();
}
}
}
]
}
)
]
}
).show(Ext.getBody());
};
//grid1的上层菜单栏
var gridtbar = new Ext.Toolbar(
{
xtype:'toolbar',
items:[
{
id:'addWin',
xtype:'button',
text : '添加',
iconCls : 'add',
//增加菜单点击事件
handler:function(){
var win1 = new win();
}
}, {
xtype:'button',
text : '删 除',
iconCls : 'delete',
handler:function(){}
},'-','预算金额:',new Ext.form.Label({
xtype: 'label',
id:'预算金额',
labelSeparator:'',
text:'ceshi',
readOnly:true,
width:70
}),'-','决算金额:',new Ext.form.Label({
xtype: 'label',
id:'决算金额',
text:'',
fieldLabel:'',
labelSeparator:'',
readOnly:true,
text:'ceshi',
width:70
}),'-','已交金额::',new Ext.form.Label({
xtype: 'label',
id:'已交金额:',
labelSeparator:'',
readOnly:true,
text:'ceshi',
width:70
}),'-','未交金额:',new Ext.form.Label({
xtype: 'label',
id:'未交金额',
labelSeparator:'',
cls:'load_text',
text:'ceshi',
readOnly:true,
width:70
})]
})
//grid1的下层菜单栏
var colModel = new Ext.grid.ColumnModel([
{
header : '交退费',
sortable : true,
dataIndex : '交退费'
},
{
header : '费用类型',
sortable : true,
dataIndex : '费用类型'
},{
header : '金额',
sortable : true,
dataIndex : '金额'
},
{
header : '经办人',
sortable : true,
dataIndex : '经办人'
}, {
header : '时间',
sortable : true,
dataIndex : '时间'
}
]);
var grid1 = new Ext.grid.GridPanel({
layout : 'fit',
autoHeight : true,
width : 250,
height : 500,
cm : colModel,
tbar : gridtbar
})
/* 下层主标签窗体 */
var mainTabPanel = new Ext.TabPanel({
maximizable : true,
width:1000,
height:700,
renderTo:"div1",
layoutOnTabChange:true,
activeTab : 0,
items : [{
title : '工程日志',
iconCls : 'order_activites',
layout : 'fit',
items:grid1
//items : jilu(1)
},{
id : 'jilu',
title : '处理结果',
closable : false,
layout : 'fit'
//items:jilu(1)
//items :
}, {
id : 'delPlan',
title : '工程放弃',
closable : false,
layout : 'fit'
//items : jilu(1)
}, {
id : 'costMoney',
title : '交退费',
closable : false,
layout : 'fit',
items : grid1
},{
title: '通气建档',
closable: false,
layout: 'fit'
//items:jilu(1)
}]
});
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
上述案例要添加<script type="text/javascript" src="../ext/ext_group.js"></script>文件