EXTJS2.2 FormPane对象研究
function cForm()
{
///------------------------数据源
var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'],[6, '笨.1'],[7, '笨.2'],[8, '笨.3'],[4,'无敌了'],[5,'无人了'] ];
var reader = new Ext.data.ArrayReader(
{id: 0},
[
{name: 'value'},
{name: 'key'}
]);
var store=new Ext.data.Store({
reader:reader
});
store.loadData(arr);
//--------------------------
//测试面板
var xform = new Ext.form.FormPanel({
///applyTo:"MXT",
///基本样式
baseCls: 'x-plain',
///布局凡是
layout:'absolute',
///提交的数据
url:'save-form.php',
//闭合时的效果
animCollapse:true,
///默认的 输入类型
defaultType: 'textfield',
items: [{
x: 0,
y: 5,
xtype:'label',
text: '测试中...:'
},{
///是否允许为空
allowBlank: false,
//验证的提示文字内容
blankText:'验证的提示内容,不能为空',
x: 60,
y: 0,
name: 'to',
fieldLabel:'text',
maskRe:/[a-zA-z]/gi,
anchor:'50%' // anchor width by percentage
},
///CLASS
{
x: 300,
y: 0,
name: 'tozcxv',
anchor:'100%' // anchor width by percentage
},
{
x: 0,
y: 35,
xtype:'label',
text: '测试中:'
},{
x: 60,
y: 30,
//maskRe:'/[a-zA-z]/gi',
name: '开始中',
anchor: '100%' // anchor width by percentage
},{
x:0,
y: 60,
xtype: 'textarea',
name: 'msg',
anchor: '100% 40%' // anchor width and height
},
///时间按钮
{
x:0,
y:200,
xtype: 'datefield',
name: 'msgzcx',
anchor: '50% 100%' // anchor width and height
},
// ///时间
{
x:240,
y:200,
xtype: 'timefield',
name: 'msgzcxdt',
///时间的递增
increment:10,
///验证失败的文字提示
invalidText:'时间格式不正确',
anchor: '50% 100%' // anchor width and height
},
///下拉选项框
{
x:0,
y:230,
xtype: 'combo',
///定义具体的类型 select ComboBox
fieldLabel:'ComboBox',
///是否可编辑 true ComboBox false select
editable:true,
//至少几个字时开始检索并显示检索结果 注意冲突
minChars:2,
///每页显示的大小
pageSize:3,
///值不存在时的显示
valueNotFoundText:'无此选项',
///显示的字段
displayField:'key',
///数据类型类型 本地
mode: 'local',
///数据源
store:store
},
{
x:0,
y: 260,
xtype: 'numberfield',
name: 'msgzcx',
anchor: '100% 100%' // anchor width and height
},
//数字
{
x:0,
y: 300,
xtype: 'numberfield',
name: 'msgzcx',
anchor: '100% 100%' // anchor width and height
}
],
buttons: [{
text: '登陆',
type: 'submit',
//定义表单提交事件
handler:function(){
///提交表单
xform.getForm().submit({
url:'Operator.aspx?Action=1SAVE',
method:'post',
success:function(form,action){
alert('adsf');
},
//提交失败的回调函数
failure:function(){
alert('失败');
}
});
//提交成功的回调函数
//alert(xform.getForm());
}
}]
});
var window = new Ext.Window({
///标题
title: '操作人员管理',
///宽
width: 500,
///高
height:500,
///最小的宽带
minWidth: 300,
///最小的高度
minHeight: 200,
///布局的方式
layout: 'fit',
///是否允许调整大小
resizable:false,
///是否准许拖动
draggable:true,
///关闭按钮
closable:true,
///是否视图中显示
constrain:true,
///是否为透明背景
plain:true,
///显示最小化按钮
minimizable:true,
///最大化按钮
maximizable:true,
///是否显示收缩按钮
expandOnShow:true,
///是否显示关闭按钮
closable:false,
///关闭按钮样式
collapsedCls:"x-plain",
///不可用时 是否进行遮挡
maskDisabled:true,
///头部文本
headerAsText:"头部标题",
///表
bodyStyle:'padding:5px;',
///按钮的对其方式
buttonAlign:'center',
items: xform,
buttons: [{
text: '关闭'
},{
text: '取消'
}]
});
window.show();