newlethe
- 浏览: 83830 次
- 性别:
- 来自: 武汉
-
文章分类
最新评论
-
package：
不知楼主 是否试过火狐下面报错.....b.firstChil ...
EXTjs grid双层表头的实现 (源代码和示例) -
少年阿郎：
请把你的demo发到我的邮箱15251855442@163.c ...
Ext DateField控件 - 只选择年月 -
岳阳楼：
提示错误：消息: 'prototype' 为空或不是对象行: ...
Ext DateField控件 - 只选择年月 -
hellostory：
引用执行“清除”操作后，问题解决了。 请问如何执行清除操作。。 ...
SVN错误：Attempted to lock an already-locked dir -
jxxms：
可以用，非常好
Ext DateField控件 - 只选择年月
本范例展示如何使用表单的各种组件。
下拉框组件展示了5种使用范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码 
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = "qtip";
- //component
- var hiddenField = new Ext.form.Hidden({
- name: "hiddenField",
- value: "1"
- });
- var usernameField = new Ext.form.TextField({
- name: "username",
- fieldLabel: "用户名",
- allowBlank: true,
- blankText: "请输入用户名！"
- });
- var pwdField = new Ext.form.TextField({
- name: "password",
- fieldLabel: "密码",
- allowBlank: true,
- blankText: "请输入密码！",
- inputType: "password"
- });
- var ageField = new Ext.form.NumberField({
- name: "age",
- allowBlank: true,
- blankText: "请输入年龄！",
- fieldLabel: "年龄",
- allowDecimals: false,
- allowNegative: false,
- minValue: 18,
- minText: "年龄不能少于18",
- maxValue: 100,
- maxText: "年龄不能大于100"
- });
- var love1 = new Ext.form.Checkbox({
- name: "love1",
- boxLabel: "打球",
- inputValue: "1"
- });
- var love2 = new Ext.form.Checkbox({
- name: "love2",
- boxLabel: "游泳",
- inputValue: "2"
- });
- var love3 = new Ext.form.Checkbox({
- name: "love3",
- boxLabel: "登山",
- inputValue: "3"
- });
- var loveGroup = new Ext.form.CheckboxGroup({
- name: "love",
- columns: [80, 80, 1.0],
- fieldLabel: "爱好",
- items: [love1, love2, love3]
- });
- var sex1 = new Ext.form.Radio({
- name: "sex1",
- boxLabel: "男",
- inputValue: "1"
- });
- var sex2 = new Ext.form.Radio({
- name: "sex1",
- boxLabel: "女",
- inputValue: "0"
- });
- var sexGroup = new Ext.form.RadioGroup({
- name: "sex",
- columns: [80, 1.0],
- fieldLabel: "性别",
- items: [sex1, sex2]
- });
- //本地数据源的组合框
- var store = new Ext.data.SimpleStore({
- fields: ["code", "name"],
- data: [
- ["1", "北京"],
- ["5", "上海"],
- ["4", "广东"]
- ]
- });
- var cmbProvince = new Ext.form.ComboBox({
- id: "cmbProvince",
- hiddenName: "province.id",
- fieldLabel: "省份",
- resizable: true,
- editable: false,
- width: 100,
- emptyText: "请选择...",
- store: store,
- valueField: "code",
- displayField: "name",
- triggerAction: "all",
- mode: "local"
- });
- //远程数据源的组合框
- var store2 = new Ext.data.SimpleStore({
- fields: ["name"],
- proxy: new Ext.data.HttpProxy({
- url: "../testForm!loadData.action"
- })
- });
- var cmbManager = new Ext.form.ComboBox({
- hiddenName: "manager",
- fieldLabel: "经理",
- editable: false,
- triggerAction: "all",
- mode: "local",
- maxHeight: 200,
- store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
- onSelect: Ext.emptyFn,
- tpl: "<tpl for='.'><div id='tree'></div></tpl>"
- });
- var root = new Ext.tree.TreeNode({
- nodeId: 1,
- text: "根节点",
- expanded: true
- });
- root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
- root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));
- var tree = new Ext.tree.TreePanel({
- root: root,
- border: false,
- autoHeight: true,
- autoScroll: true
- });
- tree.on("click", function(node){
- if(!node.isLeaf()) return; //只能选择叶节点
- //下拉框的隐藏值
- if(cmbManager.hiddenField){
- cmbManager.hiddenField.value = node.attributes.nodeId;
- }
- cmbManager.setRawValue(node.text); //下拉框的显示值
- cmbManager.collapse(); //折叠下拉框
- });
- cmbManager.on("expand", function(){
- tree.render("tree");
- });
- //分页远程数据源的组合框
- var store3 = new Ext.data.JsonStore({
- url: "../testForm!loadData3.action",
- totalProperty: "totalNum",
- root: "books",
- fields: ["id", "name"]
- });
- var cmbBook = new Ext.form.ComboBox({
- hiddenName: "books",
- fieldLabel: "书籍",
- store: store3,
- valueField: "name",
- displayField: "name",
- triggerAction: "all",
- mode: "remote",
- queryParam: "books",
- loadingText: "正在装载数据...",
- width: 180,
- minChars: 1,
- editable: false,
- listWidth: 250,
- pageSize: 3
- });
- //HTML标准组件
- var cmbPass = new Ext.form.ComboBox({
- hiddenName: "status",
- fieldLabel: "是否有效",
- triggerAction: "all",
- editable: false,
- width: 100,
- transform: "isPass",
- lazyRender: true
- });
- var cmbTimes = new Ext.form.TimeField({
- hiddenName: "time",
- fieldLabel: "时间",
- minValue: "09:00",
- minText: "所选时间应大于{0}",
- maxValue: "18:00",
- maxText: "所选时间应小于{0}",
- format: "H时i分",
- increment: 30,
- invalidText: "时间格式无效！",
- maxHeight: 200,
- width: 100,
- value: "09时00分",
- editable: false
- });
- var cmbMonths = new Ext.ux.MultiSelectCombo({
- hiddenName: "months",
- fieldLabel: "月份",
- maxHeight: 200,
- editable: false,
- store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
- mode: "local",
- width: 180,
- maxItemsCount: 3,
- maxItemsCountText: "最多只能选择三个选项！"
- });
- var cmbBirths = new Ext.form.DateField({
- name: "births",
- fieldLabel: "出生日期",
- disabledDays: [0,6],
- disabledDaysText: "禁止选择周末！",
- width: 100,
- readOnly: true,
- format: "Y-m-d",
- invalidText: "不是有效的日期值！"
- });
- var fieldSet1 = new Ext.form.FieldSet({
- title: "下拉框",
- checkboxName: "fieldSet1",
- checkboxToggle: true,
- autoHeight: true,
- layout: "table",
- layoutConfig: {
- columns: 3
- },
- defaults: {
- style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
- layout:"form",
- labelAlign: "right"
- },
- items: [
- {rowspan:1, colspan:1, items:[cmbProvince]},
- {rowspan:1, colspan:1, items:[cmbManager]},
- {rowspan:1, colspan:1, items:[cmbBook]},
- {rowspan:1, colspan:1, items:[cmbPass]},
- {rowspan:1, colspan:1, items:[cmbTimes]},
- {rowspan:1, colspan:1, items:[cmbMonths]},
- {rowspan:1, colspan:1, items:[cmbBirths]}]
- });
- var remarksField = new Ext.form.TextArea({
- name: "remarks",
- fieldLabel: "备注",
- width: 400,
- height: 80
- });
- var form = new Ext.form.FormPanel({
- id: "frmAddUser",
- title: "新增用户",
- autoWidth: true,
- autoHeight: true,
- frame: true,
- renderTo: Ext.getBody(),
- labelWidth: 70,
- tbar: toolbar,
- items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
- fieldSet1, remarksField],
- url: "../testForm!ajaxSubmitForm.action"
- });
- });
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//component
var hiddenField = new Ext.form.Hidden({
name: "hiddenField",
value: "1"
});
var usernameField = new Ext.form.TextField({
name: "username",
fieldLabel: "用户名",
allowBlank: true,
blankText: "请输入用户名！"
});
var pwdField = new Ext.form.TextField({
name: "password",
fieldLabel: "密码",
allowBlank: true,
blankText: "请输入密码！",
inputType: "password"
});
var ageField = new Ext.form.NumberField({
name: "age",
allowBlank: true,
blankText: "请输入年龄！",
fieldLabel: "年龄",
allowDecimals: false,
allowNegative: false,
minValue: 18,
minText: "年龄不能少于18",
maxValue: 100,
maxText: "年龄不能大于100"
});
var love1 = new Ext.form.Checkbox({
name: "love1",
boxLabel: "打球",
inputValue: "1"
});
var love2 = new Ext.form.Checkbox({
name: "love2",
boxLabel: "游泳",
inputValue: "2"
});
var love3 = new Ext.form.Checkbox({
name: "love3",
boxLabel: "登山",
inputValue: "3"
});
var loveGroup = new Ext.form.CheckboxGroup({
name: "love",
columns: [80, 80, 1.0],
fieldLabel: "爱好",
items: [love1, love2, love3]
});
var sex1 = new Ext.form.Radio({
name: "sex1",
boxLabel: "男",
inputValue: "1"
});
var sex2 = new Ext.form.Radio({
name: "sex1",
boxLabel: "女",
inputValue: "0"
});
var sexGroup = new Ext.form.RadioGroup({
name: "sex",
columns: [80, 1.0],
fieldLabel: "性别",
items: [sex1, sex2]
});
//本地数据源的组合框
var store = new Ext.data.SimpleStore({
fields: ["code", "name"],
data: [
["1", "北京"],
["5", "上海"],
["4", "广东"]
]
});
var cmbProvince = new Ext.form.ComboBox({
id: "cmbProvince",
hiddenName: "province.id",
fieldLabel: "省份",
resizable: true,
editable: false,
width: 100,
emptyText: "请选择...",
store: store,
valueField: "code",
displayField: "name",
triggerAction: "all",
mode: "local"
});
//远程数据源的组合框
var store2 = new Ext.data.SimpleStore({
fields: ["name"],
proxy: new Ext.data.HttpProxy({
url: "../testForm!loadData.action"
})
});
var cmbManager = new Ext.form.ComboBox({
hiddenName: "manager",
fieldLabel: "经理",
editable: false,
triggerAction: "all",
mode: "local",
maxHeight: 200,
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
onSelect: Ext.emptyFn,
tpl: "<tpl for='.'><div id='tree'></div></tpl>"
});
var root = new Ext.tree.TreeNode({
nodeId: 1,
text: "根节点",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));
var tree = new Ext.tree.TreePanel({
root: root,
border: false,
autoHeight: true,
autoScroll: true
});
tree.on("click", function(node){
if(!node.isLeaf()) return; //只能选择叶节点
//下拉框的隐藏值
if(cmbManager.hiddenField){
cmbManager.hiddenField.value = node.attributes.nodeId;
}
cmbManager.setRawValue(node.text); //下拉框的显示值
cmbManager.collapse(); //折叠下拉框
});
cmbManager.on("expand", function(){
tree.render("tree");
});
//分页远程数据源的组合框
var store3 = new Ext.data.JsonStore({
url: "../testForm!loadData3.action",
totalProperty: "totalNum",
root: "books",
fields: ["id", "name"]
});
var cmbBook = new Ext.form.ComboBox({
hiddenName: "books",
fieldLabel: "书籍",
store: store3,
valueField: "name",
displayField: "name",
triggerAction: "all",
mode: "remote",
queryParam: "books",
loadingText: "正在装载数据...",
width: 180,
minChars: 1,
editable: false,
listWidth: 250,
pageSize: 3
});
//HTML标准组件
var cmbPass = new Ext.form.ComboBox({
hiddenName: "status",
fieldLabel: "是否有效",
triggerAction: "all",
editable: false,
width: 100,
transform: "isPass",
lazyRender: true
});
var cmbTimes = new Ext.form.TimeField({
hiddenName: "time",
fieldLabel: "时间",
minValue: "09:00",
minText: "所选时间应大于{0}",
maxValue: "18:00",
maxText: "所选时间应小于{0}",
format: "H时i分",
increment: 30,
invalidText: "时间格式无效！",
maxHeight: 200,
width: 100,
value: "09时00分",
editable: false
});
var cmbMonths = new Ext.ux.MultiSelectCombo({
hiddenName: "months",
fieldLabel: "月份",
maxHeight: 200,
editable: false,
store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
mode: "local",
width: 180,
maxItemsCount: 3,
maxItemsCountText: "最多只能选择三个选项！"
});
var cmbBirths = new Ext.form.DateField({
name: "births",
fieldLabel: "出生日期",
disabledDays: [0,6],
disabledDaysText: "禁止选择周末！",
width: 100,
readOnly: true,
format: "Y-m-d",
invalidText: "不是有效的日期值！"
});
var fieldSet1 = new Ext.form.FieldSet({
title: "下拉框",
checkboxName: "fieldSet1",
checkboxToggle: true,
autoHeight: true,
layout: "table",
layoutConfig: {
columns: 3
},
defaults: {
style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
layout:"form",
labelAlign: "right"
},
items: [
{rowspan:1, colspan:1, items:[cmbProvince]},
{rowspan:1, colspan:1, items:[cmbManager]},
{rowspan:1, colspan:1, items:[cmbBook]},
{rowspan:1, colspan:1, items:[cmbPass]},
{rowspan:1, colspan:1, items:[cmbTimes]},
{rowspan:1, colspan:1, items:[cmbMonths]},
{rowspan:1, colspan:1, items:[cmbBirths]}]
});
var remarksField = new Ext.form.TextArea({
name: "remarks",
fieldLabel: "备注",
width: 400,
height: 80
});
var form = new Ext.form.FormPanel({
id: "frmAddUser",
title: "新增用户",
autoWidth: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
labelWidth: 70,
tbar: toolbar,
items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
fieldSet1, remarksField],
url: "../testForm!ajaxSubmitForm.action"
});
});
分享到：
发表评论
-
ExtJs grid中常用属性 总结
2011-08-29 11:07 2419问题：使用Grid时，如果出现列标题与复选框错位 使用定 ... -
ExtJS 中xtype和 class对照表
2011-08-25 08:55 1026xtype Class ... -
EXTjs grid双层表头的实现 (源代码和示例)
2011-08-11 14:34 2936源代码:加载到页面中的js文件GridDoubleHead ... -
Extjs Grid相关组件及属性
2011-08-11 14:14 1616Ext.grid.GridPanel ... -
EXT的formpanel中的横向排列布局
2011-06-29 09:52 3202利用formpanel的form和column属性混合使用来 ... -
EXT中将grid的sm选择项动态添加到ComboBox
2011-06-29 09:09 1239//创建ComboBox的数据源 var itemDs = ... -
EditorGridPanel组件中根据条件取消某一行的编辑状态
2011-03-16 10:40 1104var dataClearGrid = new Ext.gri ... -
Ext.grid.GridPanel中的符合条件的某行不能选择
2011-03-15 14:10 1709让Ext.grid.GridPanel不能选择，即令Ext.g ... -
Ext中从grid 到tree的拖拽
2011-03-15 09:23 1490// 使用一个Json数据结构作为tree的本地数据源 ... -
Ext.grid.ColumnModel 后期通过setEditor设置editor
2011-02-28 15:52 3360Ext.grid.EditorGridPanel 顾名思义就是 ... -
Ext.ux.form.FileUploadField 重置的问题
2011-02-24 13:52 1587Js代码 text: '重置', ... -
EXT 树的配置详细属性介绍
2011-02-23 17:37 12931、Ext.tree.TreePanel 主要配 ... -
Ext.data.Store
2011-02-10 15:08 1023Ext.data.Store是EXT中用来进行数据交换和数据交 ... -
ext中常见的几种布局布局Layout
2010-12-02 14:02 3091所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所 ... -
如何将string类型的数据如何显示在Ext的datefield中
2010-11-18 10:42 1259//返回的String的数据先格式化处理 obj.month ... -
Ext DateField控件 - 只选择年月
2010-11-18 09:44 4716var monthField = new Ext.u ... -
动态修改Ext控件的readOnly属性
2010-11-17 11:37 1903Ext 控件的readOnly属性是可以在控件初始化过程中 ... -
EXT表单组件常见属性介绍（二）
2010-11-17 11:24 13651、Ext.form.Hidden 2、Ex ... -
EXT表单组件常见属性介绍（一）
2010-11-17 11:23 11791、Ext.form.Action 配置项： ... -
ext的 renderer的function参数详细介绍
2010-11-12 09:31 1521renderer:function(value, cellm ...
相关推荐
本篇文章将深入探讨Ext表单组件中的checkbox，以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中，复选框是`Ext.form....
EXT表单是EXT库的核心组件之一，用于构建用户输入数据的界面。它们支持多种类型的字段，如文本框、复选框、单选按钮、下拉列表等，并且可以进行复杂的布局管理，如表格布局、流式布局和绝对布局。表单设计器通常包括...
### Ext.form表单中各种属性应用详解 ...以上介绍了 **Ext.form** 表单中常见的几个组件及其配置选项，这些组件为 Web 应用程序提供了丰富的功能和用户体验。通过合理的配置，可以轻松构建出复杂且交互性强的表单界面。
通过以上步骤，你可以实现动态加载Ext表单数据的功能。在实际应用中，可能还需要考虑错误处理、数据验证、动态更新等问题，但以上代码提供了一个基础的实现思路。不断学习和实践，你将能更好地掌握Ext JS在构建动态...
总而言之，EXT表单验证中的TextField组件通过`vtype`属性提供了丰富的验证机制，能够确保用户输入的数据质量，从而提高应用程序的稳定性和用户体验。开发者可以根据需要选择合适的vtype，或者自定义验证规则，以满足...
例如，Ext的`Ext.onReady`函数用于确保DOM加载完成后再执行代码，这是初始化Ext组件的常见方法。以下是一个简单的例子，展示如何使用MessageBox组件弹出一个警告对话框： ```html Ext.onReady(function() { Ext....
2. 参数配置：允许开发者设定组件的具体属性，如尺寸、颜色、行为等。 3. 代码预览：在生成代码前，可以预览组件的外观和功能。 4. 插件扩展：可能支持第三方插件，以实现更多特定功能。 5. 版本兼容：确保生成的...
EXT JS 的源码结构清晰，包括核心库、组件、布局、数据管理、表单元素等模块。通过阅读源码，开发者可以了解到EXT JS如何实现组件化、事件处理、数据绑定等功能，进一步优化自己的代码结构和性能。例如，ext-3.x版本...
在本示例中，Ext JS被用来动态创建表单组件，如文本框、下拉列表、复选框等，这些组件可以根据数据库字段的类型和属性自动生成。Ext JS的灵活性使得能够根据数据库的结构轻松调整UI。 2. **动态操作数据库**： ...
EXT提供了`Ext.Window`类来创建窗口，可以设置窗口大小、位置、标题、按钮等属性，并且可以包含其他EXT组件，如表格、表单等。 **EXT基本表格（GridPanel）介绍**：EXT的表格组件，即`Ext.grid.GridPanel`，是一种...
EXT JS提供了丰富的UI组件，如GridPanel（表格），FormPanel（表单），Window（弹出窗口），TabPanel（选项卡）等，这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性，如大小、颜色、样式等，并...
3. **Form**：EXT提供了强大的表单组件，如文本字段、下拉框、复选框、单选按钮等，以及表单验证功能。这些组件可以与服务器端进行数据交换，实现数据的增删改查。 4. **Tree**：EXT的树形组件用于展示层次结构的...
EXT API文档详细介绍了EXT库中的类、方法、属性和事件，使开发者能够快速掌握EXT的用法。例如，文档中会阐述EXT的GridPanel组件，这是一个用于展示表格数据的强大组件，支持排序、分页、行选择等多种功能。开发者...
7. **表单处理**：表单是网页应用中常见的元素，EXT.NET提供了丰富的表单组件和验证机制。这部分会介绍如何创建、验证和提交表单数据。 8. **高级特性**：可能包括EXT.NET的图表、树形视图、拖放功能、网格分页、富...
6. **EXT Forms**：EXT的表单组件功能强大，包括各种输入控件、验证机制以及表单提交和处理策略。开发者可以创建复杂且功能完备的表单系统。 7. **EXT Charts**：EXT 3.3.1版本包含图表组件，可以生成各种统计图表...
### 第三讲 EXT的常用组件 #### 一、如何创建一个组件 在使用EXT框架时，组件的创建是一项基础但非常重要的技能。组件是构成用户界面的基本单元，可以通过`new`关键字来创建。例如，创建一个窗口使用`new Ext....
在"EXT 前台 实例 项目"中，我们可以推测这是一个关于EXT JS前端开发的实际应用项目集，它可能包含了EXT JS的各种常见和复杂应用场景，例如数据展示、表格操作、窗口管理、表单处理、树形结构等。通过这些实例，...
表单组件是EXT JS中用于收集用户输入的关键部分。它支持验证规则、布局管理和数据绑定，使表单设计变得简单而直观。 **十七、EXT中的继承** EXT JS采用了面向对象的编程模式，支持类的继承和重写。这允许开发者在...
这个中文手册及帮助文档包含了Ext 3.0的全面介绍、API参考、示例代码以及常见问题解答，是开发者进行Ext 3.0应用开发的重要参考资料。 一、Ext概述 Ext是一个基于JavaScript的开源框架，它提供了丰富的UI组件和数据...
EXT JS的组件库非常丰富，涵盖了大部分常见的Web UI元素，如表格（Grid）、树形视图（Tree）、表单（Forms）、菜单（Menus）、工具栏（Toolbars）等。这些组件都经过精心设计，具有高度可定制性和可扩展性。此外，...