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();