Ext.onReady(function(){
//校验
Ext.applyIf(Ext.form.VTypes,{
name:function(_v){
return /^[a-z]{3}$/.test(_v);
},
nameText:"必须是3到5个汉字",
nameMask:/[a-z]/i
});
var _create = Ext.data.Record.create([
{name:'job',mapping:'job'}
]);
new Ext.FormPanel({
title:'人员信息',
renderTo:Ext.getBody(),
width:500,
height:400,
x:500,
y:400,
plain:true,
layout:'form',
frame:true,
waitMsgTarget:true,
items:[{
baseCls:'x-plain',
layout:'column',
style:'padding:5px',
items:[{
baseCls:'x-plain',
columnWidth:0.5,
defaultType:'textfield',
layout:'form',
labelWidth:65,
defaults:{width:160},
items:[{
fieldLabel:'姓名',
emptyText:'请输入姓名',
name:'name',
vtype:'name'
},{
fieldLabel:'年龄',
emptyText:'年龄在0~150之间'
},{
fieldLabel:'出生日期',
format:'Y-m-d',
xtype:'datefield',
readonly:true
},{
fieldLabel:'所在城市'
},{
fieldLabel:'QQ号码'
},{
fieldLabel:'Email-e',
name:'email'
},{
fieldLabel:'性别',
xtype:'combo',
mode:'local',
displayField:'sex',
readonly:true,
triggerAction:'all',
value:'男',
store:new Ext.data.ArrayStore({
fields:['sex'],
data:[['男'],['女']]
})
}]
},{
baseCls:'x-plain',
columnWidth:0.5,
defaultType:'textfield',
layout:'form',
labelWidth:55,
items:[{
fieldLabel:'我的照片',
inputType:'image',
width:170,
height:183
}]
}]
},{
style:'padding:5px',
baseCls:'x-plain',
defaultType:'textfield',
layout:'form',
defaults:{width:395},
labelWidth:67,
items:[{
fieldLabel:'身份证号码'
},{
fieldLabel:'具体所在地'
},{
xtype:'panel',
baseCls:'x-plain',
layout:'column',
items:[{
columnWidth:0.4,
layout:'form',
labelWidth:67,
baseCls:'x-plain',
items:[{
xtype:'combo',
fieldLabel:'职位',
displayField:'job',
mode:'local',
triggerAction:'all',
anchor:'100%',
store:new Ext.data.ArrayStore({
fields:['job'],
data:[['初级工程师'],['中级工程师'],['高级工程师']]
}),
listeners:{
'select':function(_combo,_record,_index){
this['selectItem'] = this.getValue();
}
}
}]
},{
columnWidth:0.2,
baseCls:'x-plain',
style:'padding:0 0 0 15px',
items:[{
xtype:'button',
text:'添加职位',
handler:function(){
var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;
var _job = _win.findByType('combo')[1];
var _store = _job.store;
Ext.MessageBox.prompt("请输入要添加的职位","职位添加",function(_btn,_text){
if(_btn == 'ok'){
_store.insert(0,new _create({job:_text}));
_job.setValue(_text);
_job['selectItem'] = _text;
}
});
}
}]
},{
columnWidth:0.2,
baseCls:'x-plain',
style:'padding:0 0 0 15px',
items:[{
xtype:'button',
text:'修改职位',
handler:function(){
var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;
var _job = _win.findByType('combo')[1];
var _store = _job.store;
var _value = _job.getValue();
Ext.MessageBox.prompt("输入你要修改后的职位","修改职位",function(_btn,_text){
if(_job.getValue() == null || _job.getValue() == ''){
alert('没有要修改的数据');
return '';
}
if(_btn == 'ok'){
var _index = _store.find('job',_value);
_store.getAt(_index).set('job',_text);
this.setValue(_text);
}
},_job,false,_value);
}
}]
},{
columnWidth:0.2,
baseCls:'x-plain',
style:'padding:0 0 0 15px',
items:[{
xtype:'button',
text:'删除职位',
handler:function(){
var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;
var _job = _win.findByType('combo')[1];
var _store = _job.store;
var _value = _job['selectItem'];
Ext.MessageBox.confirm('提示','确定删除当前职位吗?',function(_btn){
if(_job.getValue() == null || _job.getValue() == ''){
Ext.MessageBox.alert('error','没有可删除的数据');
}
if(_btn == 'yes'){
var _index = _store.find('job',_value);
_store.remove(_store.getAt(_index));
if(_store.getCount()>0){
this['selectItem'] = _store.getAt(0).get('job');
this.setValue(_store.getAt(0).get('job'));
}else{
this.setValue('');
this['selectItem'] == null;
}
}
},_job);
}
}]
}]
}]
}],
buttons:[{
text:'确定',
handler:function(){
this.ownerCt.ownerCt.getForm().submit({waitTitle:'提交',waitMsg:'loading...'});
}
},{
text:'载入'
},{
text:'取消',
handler:function(){
this.ownerCt.ownerCt.getForm().reset();
}
}],
listeners:{
'show':function(_win){
var img = _win.findByType('textfield')[7];
img.getEl().dom.src='picture/http_imgload.jpg';
var _job = _win.findByType('combo')[1];
var _value = _job.store.getAt(0).get('job');
_job.setValue(_value);
_job['selectItem'] = _value;
}
}
}).show();
});
- 大小: 76.6 KB
分享到:
相关推荐
Ext的FormPanel组件说明formPanel的详细使用说明
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
Ext的formpanel table布局实例,有效解决了页面resize时列宽不跟随改变的问题,即列宽的自适应宽度
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
-修正DatePicker中的一个bug(31/01/2010将会返回NULL)使用DateFormatString来生成SelectedDate属性(feedback:OktaEndy)。 -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则...
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
ExtJs中表单formPanel的横向布局
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第...
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
//定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...
var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...