//点击用户新增
new Ext.Button({
text:'新增用户',
id:'addUser',
icon:'../../image/user_add.png',
cls:'x-btn-text-icon',
handler:function(){
//清空上次文本框填写的数据
Ext.getCmp('newForm').form.reset();
//弹出模态窗口
win.show();
}
})
//模态窗口
var win = new Ext.Window({
title:'添加用户',
width:350,
height:280,
modal:true,
items:[form]
});
//模态窗口需要填写的字段
//提示信息方式
Ext.QuickTips.init();
//新增用户
var form = new Ext.form.FormPanel({
frame:true,
url:'../../userManager/user_saveUser.action',
id:'newForm',
items:[{layout:'form',items:[{
xtype: 'textfield',
id:'userName_add',
allowBlank : false,
fieldLabel:'用户名称',
blankText : '用户名称不能为空',
width:150
}]},
{layout:'form',items:[{
xtype: 'textfield',
inputType:'password',
id:'password_add',
allowBlank : false,
blankText : '密码不能为空',
regex : /^[\s\S]{0,20}$/,
regexText : '密码长度不能超过20个字符',
fieldLabel:'用户密码',
width:150
}]},
{layout:'form',items:[{
xtype: 'textfield',
inputType:'password',
id:'password_confirm_add',
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"password_add",//要比较的另外一个的组件的id
allowBlank : false,
fieldLabel:'确认密码',
width:150
}]},
{layout:'form',items:[{
xtype: 'textfield',
id:'condition1_add',
allowBlank : false,
blankText : '姓名不能为空',
fieldLabel:'姓名',
width:150
}]},
{layout:'form',items:[{
xtype: 'treeField',
id:'depart_add',
valueField:'id',
fieldLabel: '所属部门',
emptyText:'选择所属部门',
readOnly:true,
allowBlank:false,
blankText:'所属部门部门为空',
listWidth:200,
listHeight:200,
dataUrl:'../../userManager/user_treeList.action',
hiddenName:'depart_add',
width:150
}]},
{layout:'form',items:[{
xtype: 'datefield',
readOnly:true,
id:'birthDate_add',
allowBlank : false,
blankText : '出生日期不能为空',
fieldLabel:'出生年月',
width:150
}]},
{
layout:'form',
items:[{columnWidth:0.2,layout:'form',items:[{
xtype:'radiogroup',fieldLabel : "用户性别", anchor:'70%',columns: 2 ,items:
[{boxLabel: "先生", name: 'cst_sex_add',id:'cst_man_add' ,checked:true,inputValue: 1},
{boxLabel: "女士", name: 'cst_sex_add',id:'cst_woman_add',inputValue: 2}]
}]}
]
}
],
buttons:[{
id:'save',
text:'保存',
handler:function(){
var json = {success:function(){store.reload();win.hide();},failure:function(){}};
form.getForm().submit(json);
}
},{
id:'cancel',
text:'取消',
handler:function(){
win.hide();
}
}
]
});
//userManager/user_treeList.action返回来的数据格式:
[{"childernId":0,"children":[{"childernId":0,"children":[],"cls":"file","expanded":false,"id":150,"leaf":true,"parentId":1,"text":"OBS测试一级目录1"},{"childernId":0,"children":[{"childernId":0,"children":[{"childernId":0,"children":[],"cls":"file","expanded":false,"id":130,"leaf":true,"parentId":129,"text":"OBS管理一级目录3"}],"cls":"folder","expanded":false,"id":129,"leaf":false,"parentId":128,"text":"OBS管理一级目录2"},{"childernId":0,"children":[],"cls":"file","expanded":false,"id":131,"leaf":true,"parentId":128,"text":"OBS管理一级目录4"}],"cls":"folder","expanded":false,"id":128,"leaf":false,"parentId":1,"text":"OBS管理一级目录1"},{"childernId":0,"children":[],"cls":"file","expanded":false,"id":161,"leaf":true,"parentId":1,"text":"OBS测试无状态刷新"}],"cls":"folder","expanded":true,"id":1,"leaf":false,"parentId":0,"text":"三元管理系统OBS"}]
如果此树的深度不确定,则需要使用递归函数进行构造返回的数据。
- 大小: 14.8 KB
分享到:
相关推荐
9. **表单**:用于创建、编辑文件属性,EXTJS的FormPanel组件可以构建复杂的表单布局,包括文本框、下拉列表、复选框等输入控件。 10. **国际化(i18n)**:EXTJS支持多语言,便于全球团队使用。 11. **响应式布局...
6. **树形视图(Tree)**:EXTJS的树形组件可以展示层次结构的数据,支持拖放操作,适用于文件系统或组织结构的展现。 7. **图表(Charts)**:EXTJS内建了丰富的图表组件,支持多种类型的图表,如柱状图、饼图、...
1. **Toolbars and Menus**: 工具栏和菜单提供了丰富的交互选项,可以包含按钮、下拉列表、分割按钮等,通常用于实现导航和操作。 2. **Forms**: ExtJs的表单组件包括文本输入框、密码框、选择框、日期选择器等,...
树形结构是一种常见的数据组织方式,而选择模型则决定了用户如何与树结构互动。 - **树——TreePanel**: 介绍了TreePanel组件的基本概念和使用方法。 - **创建简单的TreePanel**: 通过示例演示了如何创建一个基本的...
2. **类别管理**:提供一个可编辑的下拉列表或树形结构,用于分类收入和支出,如食品、交通、娱乐等。这可以帮助用户更好地组织和分析财务状况。 3. **图表分析**:使用ExtJS图表组件,如饼图或柱状图,可视化展示...
4. **表单组件**:EXTJS 包含多种表单控件,如文本框、下拉列表、日期选择器等,支持验证和远程提交,方便创建功能齐全的表单。 5. **数据网格**:EXTJS的数据网格组件可以显示大量数据,并提供排序、过滤、分页等...
5. Tree Panel:用于展示树形结构的数据,如文件系统或组织结构。 6. Tab Panel:创建带有多个标签的面板,便于组织和切换内容。 7. Charting:数据可视化组件,可以创建各种图表,如柱状图、饼图、线图等。 通过这...
- `treepanel`: 展示树形结构数据的组件,支持展开、折叠等操作。 - `flash`: 显示Flash内容的组件。 3. **工具栏组件**: - `paging`: 分页工具栏,用于在大量数据中进行分页浏览。 - `toolbar`: 创建工具栏...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
6. **表单组件和验证**:ExtJS提供了大量的表单元素,如文本字段、复选框、下拉列表等,以及内置的表单验证功能,确保用户输入的数据符合预期格式。 7. **拖放功能**:2.2版本支持拖放操作,使得用户可以轻松地将...
ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了大量的预定义组件,如表格、表单、树形视图、菜单、对话框等,极大地简化了前端界面的开发。这些组件具有高度可定制性,能够满足各种复杂的交互需求。在...
3. **树形结构**:如果系统包含分类管理,EXTJS的树形组件可以优雅地展示图书的分类结构。 4. **图表组件**:EXTJS还可以绘制各种图表,用于统计分析,如图书借阅量的统计图表。 5. **Ajax通信**:EXTJS内置的Ajax...
- **Form Panel**(表单面板):用于创建各种表单元素,如文本框、下拉列表等。 - **Tree Panel**(树形面板):用于展示层次结构的数据。 - **Window**(窗口):用于创建弹出式对话框或者模态窗口。 - **Tab Panel...
- 这个版本提供了一套完整的UI组件,包括表格、树形视图、面板、表单、菜单、工具栏等,便于快速开发复杂的Web界面。 - 支持AJAX交互,允许动态加载数据,实现页面无刷新操作。 - 提供了强大的布局管理,可以轻松...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
复杂组件如网格、树形视图等。 - **组件的生命周期** - 组件从创建到销毁的过程称为生命周期,主要包括初始化、渲染、激活、销毁等阶段。 - 了解每个阶段发生的事情有助于更好地控制组件的行为。 - **组件渲染...
2. **组件体系**:EXTJs的组件模型包括按钮、表格、面板、表单、树形视图等,每个组件都可以独立配置和扩展。理解这些组件的属性、事件和方法是使用EXTJs的基础。 3. **布局管理**:EXTJs拥有多种布局方式,如fit...
1. **丰富的UI组件**:FineUI提供了大量预先封装的.NET控件,如日期选择器、下拉列表、树形视图、数据网格等,大大简化了开发过程。 2. **响应式设计**:FineUI支持移动设备,可以创建适应不同屏幕大小的跨平台应用...
2. **表单(Forms)**:表单是数据输入的重要部分,FineUI的表单组件支持各种控件,如文本框、下拉列表、日期选择器等,还支持表单验证,确保用户输入的数据有效性。 3. **表格(Grids)**:FineUI的表格组件功能...