- 浏览: 204631 次
- 性别:
- 来自: 南京
-
文章分类
最新评论
-
gaoke_71：
[*]
Spring MVC_HandlerInterceptorAdapter的使用 -
q474818917：
[flash=200,200][flash=200,200][ ...
Spring MVC_HandlerInterceptorAdapter的使用 -
kisbo110：
java 代码只粘贴处了部分代码！要么你就别粘贴出来，要不就 ...
java直接打开pdf,doc,xls -
yjshengshe：
什么回显？图片不能显示了?那肯定是你后台的javabean没写 ...
可上传图片的htmlEditor -
ganqingde：
我试了，能上传，但不能回显，报错了
可上传图片的htmlEditor
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>文件
发表评论
相关推荐
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
### ExtJS布局全面讲解 #### 一、Border Layout（方位布局） **定义与特性：** - **定义**：Border布局由类`Ext.layout.BorderLayout`定义，布局名称为`border`，这是一种非常实用且常见的布局方式，适用于创建...
### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架，用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一，它可以帮助开发者有效地组织UI组件，使得用户界面既美观又实用。...
列布局（Column Layout）是ExtJS的一种布局策略，它允许你在同一行内创建多个并排显示的区域，每个区域可以包含不同的组件，如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单，使得数据输入和...
ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦...
在ExtJS众多功能中，Column布局是一个非常实用的布局类型，它允许开发者在容器中灵活地安排子项，按照列的形式排列。通过本篇学习ExtJS Column布局，将会掌握Column布局的基本属性和应用方式，以便在实际开发中能够...
### Extjs FieldSet 两行两列布局解析 在Extjs框架中，`FieldSet`是一种常见的组件，常用于组织一组相关的表单字段，并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...
以下是关于ExtJS布局的详细解释： 1. **基本知识：布局操作** - 布局操作涉及容器组件内的子元素组件如何组织和分布。 - 布局的基类是`Ext.layout.ContainerLayout`，它提供了所有布局的基础功能，但本身并不具有...
### Extjs布局详解 在深入探讨Extjs布局之前，我们先简单回顾一下Extjs是什么。Extjs是一款基于JavaScript的企业级富客户端应用框架，它提供了一系列的UI组件和强大的数据处理能力，使得开发者能够构建出高性能的...
9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图...
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...
3. **布局管理**：ExtJS拥有多种布局方式，如Fit布局、Border布局、Column布局等，可以灵活地调整组件在容器中的位置和大小。 4. **表格（Grid）**：ExtJS的表格组件支持大量的功能，如分页、排序、过滤、行编辑等...
ExtJS布局是构建用户界面的关键部分，它定义了组件如何在容器中排列和展示。本文将详细介绍ExtJS的9种布局样式，帮助开发者更好地理解和应用这些布局。 1. **Absolute Layout**： Absolute布局允许你在容器内根据...
3. **布局管理**：EXTJS 的布局管理器允许开发者轻松地管理组件的大小和位置，支持各种布局模式，如Fit、Border、Table、Column等，适应不同类型的界面需求。 4. **Ajax集成**：EXTJS 内置了Ajax通信机制，可以方便...
- **表单面板（Ext.form.Panel）**：是表单的基础容器，可以包含多个表单字段和布局。它管理表单的提交、验证等功能。 - **表单字段**： - `Ext.form.field.Text`：用于输入单行文本。 - `Ext.form.field....
ExtJS的布局系统允许开发者自定义容器中的子元素排列方式，如`Fit布局`（完全填充容器）、`Border布局`（分隔式布局）和`Form布局`（表单元素的流式布局）。2.2版本还支持`Table布局`和`Column布局`，提供更复杂的...
4、通过实现角色管理、用户管理两个基础的功能模块，演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法，以及border、column、form、fit、hbox等常用布局方式； 5、通过自定义一个...
在EXTJS4中，ComboBox是一个常用的组件，它用于创建下拉选择框，通常用于输入框的辅助选择。...这需要理解EXTJS的事件系统、组件创建和布局管理。同时，正确引用EXTJS库文件和资源对于应用的正常运行至关重要。
一个完整的extjs窗体应用，包含form布局，column布局，很实用！