`

Ext中window的用法(人员信息)Beta 3.0

阅读更多
Ext.onReady(function(){
 
  var _create = Ext.data.Record.create([
  {name:'job',mapping:'job'}
  ]);
  new Ext.Window({
  title:'人员信息',
  width:500,
  height:400,
  x:400,
  y:100,
  minimizable:true,
  maximizable:true,
  plain:true,
  layout:'form',
  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:'姓名',
  value:'张翔'
  },{
  fieldLabel:'年龄',
  value:'22'
  },{
  fieldLabel:'出生日期',
  format:'Y-m-d',
  xtype:'datefield',
  value:'1988-09-24',
  readonly:true
  },{
  fieldLabel:'所在城市',
  value:'北京'
  },{
  fieldLabel:'QQ号码',
  value:'369946779'
  },{
  fieldLabel:'邮政编码',
  value:'4412200'
  },{
  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:'身份证号码',
  value:'保密'
  },{
  fieldLabel:'具体所在地',
  value:'海淀上地'
  },{
  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:'确定'
  },{
  text:'取消'
  }],
  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();
  });
  • 大小: 92.9 KB
0
0
分享到:
评论

相关推荐

    Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文

    Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文

    Ext 3.0 中文文档

    Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档

    Ext_Window用法

    Ext_Window用法

    Ext3.0使用示例

    Ext3.0是一种广泛使用的日志文件系统,它是在Linux操作系统中的标准文件系统之一。这个版本的Ext3引入了许多改进,以提高系统的稳定性和性能,尤其适合大规模数据存储和高并发访问的环境。本文将深入探讨Ext3.0的...

    EXT3.0中文API文档

    EXT3.0中文API文档是针对EXT JavaScript库的版本3.0所编写的详细参考资料,主要面向前端开发者,特别是那些在Web应用中使用EXT3.0框架进行开发的专业人士。EXT是一个强大的用户界面库,提供了丰富的组件和功能,用于...

    ext 3.0中文API

    在EXT 3.0中文文档.CHM文件中,开发者可以找到关于EXT组件、布局、数据绑定、AJAX通信、事件处理等方面的详细信息。这个CHM文件通常包含一个索引和搜索功能,使得查找特定API或概念变得更加便捷。通过深入学习和理解...

    Ext3.0的中文API

    Ext3.0的中文APIExt3.0的中文APIExt3.0的中文APIExt3.0的中文APIExt3.0的中文APIExt3.0的中文API

    ext 3.0 中文API

    在学习EXT 3.0时,建议首先了解其基本架构和组件体系,然后深入研究具体组件的使用方法,最后结合实际项目需求进行实践。此外,理解EXT的事件驱动机制和数据绑定原理也是掌握EXT的关键。通过EXT 3.0 中文API的学习,...

    最新ext3.0资源包 ext3.0

    EXT3.0 alpha 版本可能是指EXT3的一个早期开发版本,通常alpha版本是软件开发过程中的第一个公开测试版本,可能存在较多bug和不稳定因素。而EXT2.21可能是EXT2文件系统的某个更新版本,EXT2是EXT3的前身,不包含日志...

    一个简单的Ext.Window中插入图片的例子

    此外,提供的`一个简单的Ext.Window中插入图片.doc`文件可能包含更详细的步骤或示例代码,建议查阅该文档以获取更深入的理解。记住,实践是最好的老师,动手尝试并根据项目需求进行调整,你将更加熟练地掌握在`Ext....

    Ext 中文文档,Ext+3.0.CHM,Ext学习文档

    Ext 最新文档下载,Ext中文文档下载,Ext+3.0.CHM,Ext学习文档,实用,且实惠咯...

    EXT3.0 中文API

    EXT3.0中文API是针对Linux操作系统中EXT3文件系统的一种接口文档,它为开发者提供了详细的操作指南,以便他们在编程时能有效地与EXT3文件系统交互。EXT3,全称Extended File System version 3,是一种日志式文件系统...

    Ext3.0 + 中文API

    对于初学者,可以按照API文档的指引逐步学习,理解每个组件的工作原理和使用方法;对于有经验的开发者,API文档则提供了详细的参考信息,有助于他们在开发过程中快速定位问题并找到解决方案。 总之,Ext3.0结合中文...

    EXT3.0 登录实例

    EXT3.0登录实例是EXT框架中的一个基础应用案例,它展示了如何使用EXT库来创建用户认证系统,这在Web开发中是至关重要的。 在EXT3.0中,登录界面通常由EXT的组件构建,如FormPanel、TextField、Button等。FormPanel...

    EXT3.0中文文档

    EXT3.0中文文档是针对Linux操作系统中EXT3文件系统的详尽指南,它为开发者和系统管理员提供了关于这个成熟且广泛使用的文件系统的重要信息。EXT3(Third Extended File System)是Linux内核的一个日志式文件系统,由...

    Ext3.0 中文帮助手册

    通过阅读并理解这个Ext3.0中文帮助手册,开发者能够熟练掌握Ext库的使用,构建出高效、美观的Web应用。手册的CHM格式是一种常见的帮助文件格式,包含索引、搜索功能,便于快速查找和学习所需信息。对于任何想要提升...

    ext3.0所有控件演示代码

    这个压缩包文件提供了EXT3.0中的几乎全部控件的演示代码,覆盖了表格、表单、分页工具栏以及图标等多个重要组件的使用方法。下面将详细介绍这些知识点。 1. 表格(Grid):EXT3.0的表格控件是其核心功能之一,能够...

    Ext 3.0 中文文档.zip

    Ext 3.0 是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它以其强大的组件化和数据绑定功能而闻名,使得开发复杂的交互式界面变得简单。这份"Ext3.0中文文档"提供了全面的指南,帮助开发者深入理解...

    ext3.0.rar

    EXT3.0是一款广泛应用于Linux系统的日志文件系统,它在EXT2的基础上进行了改进,引入了日志记录功能,提高了系统的稳定性和...因此,理解EXT3的工作原理和使用方法对于Linux系统管理员和开发者来说仍然具有很高的价值。

Global site tag (gtag.js) - Google Analytics