ExtJS之 表单
简单表单:
Ext.QuickTips.init(); //初始化信息提示功能
var form = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true, //是否渲染表单
renderTo: 'form',
defaults:
{
//autoFitErrors: false 展示错误信息时 是否自动调整字段组件的宽度
lableSeparator: ':', //分隔符
labelWidth: 40, //标签宽度
width: 100, //字段宽度
allowBlank: false, //是否允许为空
blankText: '不能为空!', //为空提示的字段
labelAlign: 'left', //标签对其方式msgTarget: 'qtip'
/* msgTarget 值 还有:
title 显示浏览器原始的浮动提示信息
under 在字段下面显示一个提示信息
side 在字段右边显示一个提示信息
none 不显示
errorMsg 在errorMsg元素内显示提示信息*/
},
items: [{ xtype: 'textfield', fieldLabel: 'name:' },
{ xtype: 'numberfield', fieldLabel: 'pwd::' }
]
})
效果:
文本域(Ext.form.field.Text)
Ext.QuickTips.init(); //初始化信息提示功能
var form = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true, //是否渲染表单
renderTo: 'form',
defaults:
{
//autoFitErrors: false 展示错误信息时 是否自动调整字段组件的宽度
lableSeparator: ':', //分隔符
labelWidth: 40, //标签宽度
width: 100, //字段宽度
allowBlank: false, //是否允许为空
blankText: '不能为空!', //为空提示的字段
labelAlign: 'left', //标签对其方式msgTarget: 'qtip'
/* msgTarget 值 还有:
title 显示浏览器原始的浮动提示信息
under 在字段下面显示一个提示信息
side 在字段右边显示一个提示信息
none 不显示
errorMsg 在errorMsg元素内显示提示信息*/
},
items: [{
xtype: 'textfield',
fieldLabel: 'name',
name: 'username',
selectOnFocus: true
// regex: 正则表达式
// regexText: 匹配失败显示的文字},
{
xtype: 'textfield',
fieldLabel: 'pwd',
name: 'password', //为赋值提供线索
inputType: 'password' //文本输入为密码类型
}
],//添加 一个按钮.动态给文本框赋值
buttons: [
{
text: 'login',
handler: function () {
form.form.setValues({ //利用name属性,个文本框赋值username: 'gao', //文本框的name属性
password: '123'})
}
}
]
});
Ext.form.field.Combobox()下拉框
分两种,一种是从本地读数据,另一种是从服务器获取数据
Ext.QuickTips.init(); //初始化信息提示功能
Ext.define("provinces",
{ extend: "Ext.data.Model",
fields: [
{ name: 'province' },
{ name: 'sort'}]
});
//本地数据源
var states = Ext.create('Ext.data.Store', {
fields: ['province', 'sort'],
data: [
{ province: 'bj', sort: '1' },
{ province: 'sjz', sort: '2' }
]
});
//服务器端获取数据
var remoteStore = new Ext.data.Store({fields: [{ name: 'bookName' }, { name: 'price'}],
proxy: {
type: 'ajax',
url: 'Handler2.ashx', //获取json地址
//Reader 解码json数据
reader: {
type: 'json',
root: 'book',
total: 'total'}
}
})
var form = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true, //是否渲染表单
renderTo: 'form',
defaults:
{
//autoFitErrors: false 展示错误信息时 是否自动调整字段组件的宽度
lableSeparator: ':', //分隔符
labelWidth: 100, //标签宽度
width: 250, //文本框宽度
allowBlank: false, //是否允许为空
blankText: '不能为空!', //为空提示的字段
labelAlign: 'left', //标签对其方式msgTarget: 'qtip'
/* msgTarget 值 还有:
title 显示浏览器原始的浮动提示信息
under 在字段下面显示一个提示信息
side 在字段右边显示一个提示信息
none 不显示
errorMsg 在errorMsg元素内显示提示信息*/
},
items: [
//下拉菜单 本地获取数据源
{
xtype: 'combo',
listConfig: {emptyText: '未找到匹配值', //当值不在列表时的提示信息
maxHeight: 60
},
//设置下拉列表的最大高度为60
name: 'post',
fieldLabel: 'sss',triggerAction: 'all', //单击触发按钮,显示全部数据
store: states,
displayField: 'province', //要显示的字段
valueField: 'sort', //定义值字段
query: 'local', //本地模式 远程模式 : remote
forceSelection: true, //要求输入值必须在 列表中存在
typeAhead: true, //自动匹配
value: '1' //默认选择 bj}
,
//下拉菜单 从服务器 获取json
{
xtype: 'combo',
listConfig: {
loadingText: '正在加载', //加载数据时显示的信息
emptyText: '未找到匹配值', //当值不在列表时的提示信息
maxHeight: 60},
//设置下拉列表的最大高度为60
name: 'post',
fieldLabel: 'sss',triggerAction: 'all', //单击触发按钮,显示全部数据
store: remoteStore,
displayField: 'bookName', //要显示的字段
valueField: 'price', //定义值字段
query: 'remote', //本地模式 远程模式 : remote
forceSelection: true, //要求输入值必须在 列表中存在
typeAhead: true, //自动匹配
allQuery: 'allbook', //参数值
queryParam: 'param', // 参数名
minChars: 2, //输入2位开始匹配
queryDelay: 300 //查询延迟时间
},
]
});
服务器端代码:
string param = context.Request.QueryString["param"];
JavaScriptSerializer jss = new JavaScriptSerializer();
string book = "{success:true,book:[{bookName:'asp.net书',price:'100.00'},{bookName:'php书',price:'200.00'}]}";if (param == "allbook")
{
context.Response.Write(book);}
只读字段,label,
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,items: [
//只读字段
{xtype: 'displayfield',
fieldLabel: '展示字段',
value: '<font color=red>我是只读的</font>',
labelSeparator: ':'
},
//label
{
xtype: 'label',
forId: 'userName', //与userName相关联 ,当点击 label的时候,那么 ID是userName的空间将获得焦点
text: 'username'},
{
//name:'userName',
xtype:'textfield',
inputId: 'userName',
hideLabel:true //隐藏字段标签
}
]
})
数字输入框
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,
defaultType: 'numberfield',
defaults: { width: 200, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [
{
fieldLabel: '整数',
hideTrigger: true, // 隐藏微调按钮
allowDecimals: false, //不允许输入小数
nanText: '请输入整数' //无效数字提示},
{
fieldLabel: '小数',
decimalPrecision: 2, //精确小数点后2位
allowDecimals: true, //允许输入小数
nanText: '请输入有效小数'
},
{
fieldLabel: '数字限制',
baseChars: '12345'
}
,
{
fieldLabel: '数值限制',
maxValue: 100,
minValue: 10
}]
})
checkbox,radio,checkboxGroup,radioGroup
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,
// defaultType: 'numberfield',
defaults: { width: 200, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [
{
xtype: 'radio',
name: 'sex', //name相同的,会作为一组
fieldLabel: 'gender',
boxLabel: '男'
},
{
xtype: 'radio',
name: 'sex', //name相同的,会作为一组
fieldLabel: 'gender',
boxLabel: '女'
}
]
})
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,
// defaultType: 'numberfield',
defaults: { width: 200, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [
{
xtype: 'radiogroup',
fieldLabel: 'gendor',
columns: 2,
items: [
{ boxLabel: '男', name: 'sex', inputValue: 'male' },
{ boxLabel: '女', name: 'sex', inputValue: 'female' }
]
},
{
xtype: 'checkboxgroup',
fieldLabel: '爱好',
columns: 3,
items: [
{ boxLabel: '游泳', name: 'swim' },
{ boxLabel: '游泳', name: 'swim' },
{ boxLabel: '游泳', name: 'swim' },
{ boxLabel: '游泳', name: 'swim' },
{ boxLabel: '游泳', name: 'swim' }]
}
]
})
Ext.form.FieldSet()
展开状态:
关闭状态:
代码:
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,
// defaultType: 'numberfield',
defaults: { width: 280, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [
{
xtype: 'fieldset',
title: 'productinformation',
collapsible: true, //显示切换展开,收缩的按钮
bodyPadding: 5,defaultType: 'textfield',
defaults: { width: 300, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [
{ fieldLabel: 'chandi' },
{ fieldLabel: 'asd' }
]},
{
xtype: 'fieldset',
title: 'productinformation',
checkboxToggle: true, //显示切换展开,收缩的复选框
bodyPadding: 5,
defaults: { width: 300, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
defaultType: 'textarea',
items: [
{ fieldLabel: 'description' },]
}
]
})
表单提交之 Ajax
一次成功一次失败的:
客户端代码:
var newform = new Ext.form.Panel({
title: 'form',
height: 300,
width: 300,
frame: true,
renderTo: 'form',
bodyPadding: 5,
defaultType: 'textfield',
defaults: { width: 280, labelWidth: 80, labelSeparator: ':', labelAlign: 'left', msgTarget: 'side' },
items: [{
fieldLabel: 'username',
name: 'uname',
allowBlank: false,
vtype: 'email' //vtype的使用,也可以自定义Vtype验证
},
{
fieldLabel: 'password',
name: 'pwd',
allowBlank: false,
inputType: 'password'
}
],
buttons: [{text: 'login',
handler: login}
]
})
function login() {
newform.getForm().submit({clientValidation: true, //进行客户端验证
url: 'Handler3.ashx',
method: 'GET',
success: function (form, action) {//加载成功 处理函数
Ext.Msg.alert('提示', 'login success!');
},
failure: function (form, action) {//加载失败,处理函数
Ext.Msg.alert('提示', '登录失败:' + action.failureType);
}
})}
服务器端代码:
string pwd = context.Request.Params["pwd"];
string msg = "";
if (pwd == "123")
{
msg = "{success:true}";}
else
{
msg = "{success:false,errors:'密码错误!'}";
}context.Response.Write(msg);
