Question

Ext.FormPanel的教程？

Answer 1

var formMy = new Ext.form.FormPanel({
title : '添加人员',
frame : true,
height : 370,
width : 500,
layout : 'form',
labelWidth : 65,
defaultType : 'textfield',
bodyStyle : "padding:5px", // 上、右、下、左

listeners : {
actioncomplete : function(_form, _action) {
alert(_action.response.responseText);
}
},

errorReader : new Ext.data.XmlReader({
record : ""
}, []),

items : [{
xtype : "panel",
layout : "column",
style : 'padding:5px',
items : [{
columnWidth : .5,
layout : "form",
labelWidth : 60,
defaults : {
width : 150
},
defaultType : 'textfield',
items : [{
fieldLabel : '姓名',
name : 'name',
minLength : 2,
minLengthText : "长度不能小于2个字符",
maxLength : 10,
maxLengthText : "长度超过了10个字符",
selectOnFocus : true,
allowBlank : false,
blankText : "请填写用户名"
}, {
fieldLabel : '年龄',
readOnly : true, // 设为只读
value : 22, // 先给日期和年龄设定默认值
name : 'age'
}, {
xtype : 'datefield',
format : "Y-m-d", // 格式化日期，默认：'m/d/Y'
readOnly : true, // 设为只读
fieldLabel : '出生日期',
value : '1987-12-01',
name : 'birthday',
listeners : {
"blur" : function(_df) { // 失去焦点时
var _age = _df.ownerCt
.findByType("textfield")[1];
_age.setValue(new Date()
.getFullYear()
- _df.getValue()
.getFullYear() + 1);
}
}
}, {
fieldLabel : '联系电话',
name : 'telephone',
minLength : 5,
minLengthText : "长度不能小于5个字符",
maxLength : 11,
maxLengthText : "长度超过了11个字符",
regex : /^[1-9]\d*$/,
regexText : "联系电话输入错误"
}, {
fieldLabel : '手机号码',
name : 'mobile',
maxLength : 11,
maxLengthText : "长度超过了11个字符",
regex : /\d{11}/,
regexText : "手机号码输入错误"
}, {
fieldLabel : '电子邮件',
name : 'email',
vtype : 'email'
}, {
xtype : 'combo',
fieldLabel : '性别',
hiddenName : 'sex', // combo时，叫hiddenName
mode : 'local',
readOnly : true,
triggerAction : 'all',
store : new Ext.data.SimpleStore({
fields : ['chinese'],
data : [['女'], ['男']]
}),
displayField : 'chinese',
valueField : 'chinese',
lazyRender : true,
typeAhead : true,
value : '男'
}]
}, {
columnWidth : .5,
layout : 'form',
labelWidth : 60,
items : [{
xtype : 'textfield',
fieldLabel : '个人照片',
width : 150,
Height : 180,
inputType : 'image',

listeners : { // 该项被载入时加载照片
'render' : function(_filed) {
_filed.getEl().dom.src = "modules/test/a.jpg";
}
}
}]
}]
}, {
fieldLabel : '身份证号',
width : 390,
name : 'number',
minLength : 15,
minLengthText : "长度不能小于15个字符",
maxLength : 18,
maxLengthText : "长度超过了18个字符",
regex : /^[1-9]\d*$/,
regexText : "身份证输入错误"
}, {
fieldLabel : '具体地址',
width : 390,
name : 'address',
minLength : 3,
minLengthText : "长度不能小于15个字符",
maxLength : 40,
maxLengthText : "长度超过了40个字符"
}, {
xtype : 'panel',
layout : 'column',
items : [{
columnWidth : .5,
layout : 'form',
labelWidth : 65,
items : [{
xtype : 'combo',
fieldLabel : '职位',
anchor : "100%",
hiddenName : 'job',
mode : 'local',
readOnly : true,
triggerAction : 'all',
store : new Ext.data.SimpleStore({
fields : ['jobs'],
data : [['程序员'], ['工程师'], ['主管'],
['经理']]
}),
displayField : 'jobs',
valueField : 'jobs',
lazyRender : true,
typeAhead : true,
emptyText : '选择您的职位...',
listeners : {
'select' : function(_combo, _record, _index) {
this["selectItem"] = _record; // 选中哪一项，就把该项作为一个对象给_combo["selectItem"]
}
}
}]
}, {
columnWidth : .16,
bodyStyle : "padding:0 0 0 5px",

items : [{
xtype : 'button',
text : '添加职位',
handler : function() {
// alert(this.ownerCt.ownerCt.ownerCt.findByType("combo")[1].getValue());
// alert(this.ownerCt.ownerCt.findByType("combo")[0].getValue());

var _job = this.ownerCt.ownerCt
.findByType("combo")[0]; // 拿到职位这个combo
Ext.Msg.prompt("请输入职位名称", "职位名称", function(btn,
txt) {
// alert(this.getValue());

if (btn == 'ok') {
var _store = this.store;
// alert(_store);
_store.insert(0, new JOB({
jobs : txt
}));

if (txt != "") {
this.setValue(txt);
this["selectItem"] = this.store
.getAt(0);
}
}
}, _job);
}
}]
}, {
columnWidth : .16,
bodyStyle : "padding:0 0 0 5px",
items : [{
xtype : 'button',
text : '修改职位',
handler : function() {
var _job = this.ownerCt.ownerCt.ownerCt
.findByType("combo")[1];
// alert(_job.getValue());
if (_job["selectItem"] != null) {
Ext.Msg.prompt("请输入修改职位名称", "职位名称",
function(btn, txt) {
if (btn == 'ok') {
this["selectItem"].set(
"jobs", txt); // _job["selectItem"].set(...)
this.setValue(txt);
}
}, _job, false, _job.getValue());
}
}
}]
}, {
columnWidth : .16,
bodyStyle : "padding:0 0 0 5px",
items : [{
xtype : 'button',
text : '删除职位',
handler : function() {

var _job = this.ownerCt.ownerCt.ownerCt
.findByType("combo")[1];
if (_job["selectItem"] != null) {
Ext.Msg.confirm("系统提示", "你确定删除当前职位么",
function(btn) {
if (btn == "yes") {
this.store
.remove(_job["selectItem"]);
}

if (this.store.getCount() != 0) {
this.setValue(this.store
.getAt(0)
.get("jobs"));
this["selectItem"] = this.store
.getAt(0);

} else {
this.setValue("");
this["selectItem"] = null;
}
}, _job);
}
}
}]
}]
}]