ExtJs布局人员添加节目详解——小奎总结

最新推荐文章于 2021-02-17 04:12:19 发布
最新推荐文章于 2021-02-17 04:12:19 发布
阅读量2.1k 收藏
点赞数
分类专栏： ExtJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8657321
版权

成品效果图：

代码分析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.Window</title>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// 解决对象不支持"createContextualFragment"属性或方法的问题
if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment)
{
  Range.prototype.createContextualFragment = function(html)
  {
  var frag = document.createDocumentFragment(), 
  div = document.createElement("div");
  frag.appendChild(div);
  div.outerHTML = html;
  return frag;
  };
}
/* 2011-03-04 cx
 * 修正日期控件在IE显示不完全的问题
 */
Ext.override(Ext.menu.Menu, {
     autoWidth: function () {
             this.width += "px";
         }
});

    Ext.onReady(function(){
        var JOB=Ext.data.Record.create([{name:'job'}]);    //创建一个行对象，便于全局调用
        
        new Ext.Window({
            title:"添加人员",    //标题
            width:560,
            height:360,
            plain:true,    //强制背景样式转换
            resizable:false,    //禁止拉动
            layout:'form',
            defaultType:"textfield",
            labelWidth:60,
            bodyStyle:'padding:10px',
            style:'padding:10px',
            labelAlign:'right',    //对齐方式
        
            // Start    layout:"column"
            items:[{
                xtype:'panel',
                layout:"column",    //列布局
                baseCls:"x-plain",    //强制背景样式转换            
            
                // 定义两个form布局块儿    Start    layout:"form"
                items:[{
                    baseCls:"x-plain",    //强制背景样式转换            
                    columnWidth:.5,    //列宽
                    layout:"form",
                    defaultType:"textfield",    //默认值为panel，但是对于Ext.form.FormPanel 和 Ext.form.FieldSet来说默认值'textfield'
                    defaults:{width:150},
                    labelWidth:60,    
                    
                    items:[{
                            fieldLabel:"姓    名 "
                        },{
                            fieldLabel:"年    龄 ",
                            readOnly:true    //只读属性
                        },{
                            editable: false,    //禁止用户输入，鼠标点击文本框触发日期控件
                            xtype:'datefield',    //日期类型
                            format:'Y-m-d',    //格式化输出
                            //value:new Date(),    //设定初始值
                            value:'4/23/1993',    //如果是字符串类型，必须输入正确格式，否则不显示
                            fieldLabel:"出生日期",
                            
                            listeners:{
                                'blur':function(_df){
                                        var _age=_df.ownerCt.findByType("textfield")[1];
                                        _age.setValue(new Date().getFullYear()-_df.getValue().getFullYear());
                                    }
                                }
                        },{
                            fieldLabel:"联系电话"
                        },{
                            fieldLabel:"手机号码"
                        },{
                            fieldLabel:"电子邮件"
                        },{
                            xtype:'combo',    //下拉框
                            editable:false,    //禁止编辑,单击触发
                            fieldLabel:"性    别 ",
                            mode:'local',    //本地加载数据，默认是'remote',服务器远程加载
                            displayField:'sex',    //绑定到当前BomboBox的底层数据项的名称
                            triggerAction:'all',    //为'all'将执行allQuery配置项中指定的所有查询操作 (默认值为 'query'，唯一的)。 
                            
                            //绑定到当前combo的数据源(默认值为 undefined)
                            store:new Ext.data.SimpleStore({
                                    fields:['sex'],    // 字段定义对象数组，或者字段名称字符串。
                                    data:[["男"],["女"]], //多维数据数组 
                                })
                    }]
                },{
                    columnWidth:.5,
                    layout:"form",
                    baseCls:"x-plain",    //强制背景样式转换            
                    labelWidth:60,
                    
                    items:[{
                            xtype:"textfield",    
                            fieldLabel:"个人照片",
                            width:180,
                            height:165,
                            inputType:"image",    //照片类型
                        }]
                }]// Start    layout:"form"
            },{
                style:'margin-top:6px;',
                labelStyle:'margin-top:6px',
                fieldLabel:"身份证号",
                width:430
            },{
                fieldLabel:"具体住址",
                width:430
            },{
                xtype:'panel',
                layout:'column',
                baseCls:'x-plain',
                defaults:{baseCls:'x-plain'},
                
                items:[{
                    columnWidth:.4,
                    layout:'form',
                    labelWidth:60,
                    
                    items:{
                        xtype:'combo',    //下拉框类型
                        editable:false,
                        fieldLabel:"职   位 ",
                        anchor:'100%',    //使用锚定布局宽度设置类属于width
                        mode:'local',    //本地加载数据，默认是'remote',服务器远程加载
                        displayField:'job',    //绑定到当前BomboBox的底层数据项的名称
                        triggerAction:'all',    //为'all'将执行allQuery配置项中指定的所有查询操作 (默认值为 'query'，唯一的)。 
                        
                        listeners:{
                            select:function(_combo,_record,_index){
                                _combo['selectItem']=_record;    //如果存在就引用，如果不存在就创建
                            }    
                        },
                        //绑定到当前combo的数据源(默认值为 undefined)
                        store:new Ext.data.SimpleStore({
                            fields:['job'],    // 字段定义对象数组，或者字段名称字符串。
                            data:[["工程师"],["程序员"],["总管"],["经理"]], //多维数据数组 
                        })
                    }
                },{
                    columnWidth:0.2,
                    
                    items:{
                        style:"margin-left:5px;",
                        xtype:'button',
                        text:'添加职位',
                        
                        handler:function(){
                            var _window=this.ownerCt.ownerCt.ownerCt;
                            var _job=_window.findByType('combo')[1];    //获得第二个combox对象,在这里用于作用域                            
                            
                            Ext.MessageBox.prompt("请输入职位名称","职位名称",function(_btn, _text){
                                if(_btn=="ok"){
                                    var _store=this.store;
                                    _store.insert(0,new JOB({
                                        job:_text    
                                    }));    // 在给定的序号出插入Records并触发 add 事件
                                    this['selectItem']=this.store.getAt(0);    //重新为combo绑定数据源
                                    this.setValue(_text);
                                }
                            },_job);
                        }
                    }
                },{
                    columnWidth:.2,
                    
                    items:{
                        xtype:'button',
                        text:'修改职位',
                        
                        handler:function(){
                            var _window=this.ownerCt.ownerCt.ownerCt;
                            var _job=_window.findByType('combo')[1];    //获得第二个combox对象,在这里用于作用域
                            
                            // 获得缓存的记录数目是否大于0
                            if(_job.store.getCount()==0){
                                alert('没有任何对象');
                                return;
                            }
                            
                            Ext.MessageBox.prompt("请输修改后的职位名称","职位名称",function(_btn,_text){
                                if(_btn=="ok"){
                                    this['selectItem'].set('job',_text);    //修改这个集合的所选项内容
                                    this.setValue(_text);
                                }
                            },_job,false,_job.getValue());
                        }
                    }
                },{
                    columnWidth:.2,
                    
                    items:{
                        xtype:'button',
                        text:'删除职位',
                        
                        handler:function(){
                            var _window=this.ownerCt.ownerCt.ownerCt;
                            var _job=_window.findByType('combo')[1];    //获得第二个combox对象,在这里用于作用域
                            
                            // 获得缓存的记录数目是否大于0
                            if(_job.store.getCount()==0){
                                alert('没有任何对象');
                                return;
                            }
                            
                            Ext.MessageBox.confirm('系统提示','你确定删除当前职位吗？',function(_btn){
                                if(_btn=='yes'){
                                    this.store.remove(this['selectItem']);    //删除当前选中的文本对象
                                    if(this.store.getCount()!=0){
                                        this.setValue(this.store.getAt(0).get('job'));    //重新赋值
                                        this['selectItem']=this.store.getAt(0);    //重新为combo绑定数据源
                                    }else{
                                        this.setValue('');    
                                    }
                                }
                            },_job);
                        }
                    }
                }]
            }],    // End    layout:"column"
            
            showLock:false,
            listeners:{
                //加图片
                "show":function(_window){
                    if(!_window["showLock"]){
                        _window.findByType('textfield')[7].getEl().dom.src='mm.jpg';    
                        _window["showLock"]=true;
                    }    
                        var _sex=_window.findByType('combo')[0];    //获得第一个combox对象
                        _sex.setValue(_sex.store.getAt(0).get('sex'));    //获得初始值
                        
                        var _job=_window.findByType('combo')[1];    //获得第二个combox对象
                        var _store=_job.store;    //获得数据对象
                        _job.setValue(_store.getAt(0).get("job"));    //设置第一个对象值初始化
                        _job['selectItem']=_store.getAt(0);        //如果有就获得第一个对象
                }
            },
            buttons:[{
                text:'确定',
                handler:function(){
                    alert(this.text);
                }
            },{
                text:'取消'
            }]
        }).show();
    });

</script>
</head>
<body>

</body>
</html>









X-rapido
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
邦邦两拳‾͟͟͞(((ꎤˋ⁻̫ˊ)—̳͟͞͞o
热门推荐
progrmmmm的博客
04-26 3万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梆梆两拳</title> </head> <body> </body> <script> let div = document.createElement('div') div.style.height = '100.
sex bomb
smartmars120的专栏
02-03 3625
Spy on me baby use satellite Infrared to see me move through the night Aim gonna fire shoot me right I'm gonna like the way you fight Now you found the secret code I use To wash awa...
c# 自动填充的ComboBox,可以展开ComboBox并高亮选中的内容。
HJPror的专栏
02-25 5288
<br />public partial class ACComboBox : System.Windows.Forms.ComboBox<br />{    <br />   private bool autoComplete;<br />        [DefaultValue(true),<br />        Description("Auto-completes text if a match is found in the items collection."), Category("Be
error: overloaded function with no contextual type information
The Dawn
05-08 7827
今天改进opencv的霍夫变换时遇到的 error: overloaded function with no contextual type information 查了之后才发现是自己定义了一个 int max=0; 和opencv自带的函数max重名了，所以才会报错： 错误：没有上下文类型信息的重载函数 还有几个： 1.   error: refere
extjs3.x 获取对象的几种方法。
weixin_33739541的博客
04-25 177
2019独角兽企业重金招聘Python工程师标准>>> ...
ExtJS布局之border实例
07-22
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
学习ExtJS form布局
01-21
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels：tru表示隐藏标签，默认为false。 ...
包含各种类型的extjs小图标，Extjs4小图标
03-28
包含各种类型的extjs小图标，Extjs4小图标
学习ExtJS table布局
12-10
二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), width:500, height:200, layout:”table”, layoutConfig: { columns: 3 }, ite
jpa mysql乐观锁_JPA @Lock(value = LockModeType.PESSIMISTIC_WRITE) 悲观锁防坑
weixin_42138716的博客
02-17 3411
前提：由于业务需要在entity Product已经实现了@version的乐观锁的基础上再加上了悲观锁的控制@Lock(value = LockModeType.PESSIMISTIC_WRITE)Product findByType(String type);详情描述：但是当进行多请求的并发测试的时候发现程序第一个抢占findByType的请求能正常上锁，其它并发请求也正常进入等待，可是当第一...
ext 容器对象查找
我的笔记
06-18 282
  1.当前对象的父对象(上级对象) this.ownerCt: 2.当前对象的下一个相邻的对象 this.nextSibling();   3.当前对象的上一个相邻的对象 this.previousSibling();   4.当前容器中的第一个子对象 this.get(0); this.items.first();   5.当前容器的最后一个子对象this.items...
修改Extjs的findByType方法，弥补其不足
hecongqi的技术博客
09-24 4278
昨天我自己想在前台（用Extjs）做按钮权限控制，前台按钮权限控制本身安全性不好，这个暂不讨论。 Ext.Container 的 findByType 方法并不能获取容器下级的所有的任意类型的控件，比如获取按钮，它不能获取 panel 的 toolbar 里面的按钮，所以我想自
Ext frame=true与baseCls=x-plain共用出现有关问题
lzj0470的专栏
01-11 1289
最近在做项目过程中，Window设置了CardLayout布局，有一个formPanel设置了columnLayout，然后同时设置了 frame=true与baseCls=x-plain属性，结果切换到那个FormPanel时，布局变得很乱。 调试了半天，最后发现是这两个属性相互影响的结果，把frame=true去掉就好了
Panel类的baseCls属性
lzj0470的专栏
01-11 3102
一般情况下，x-plain会跟window组件配合。 如： 效果，如：
解读prototype（感觉不错，厚颜无耻收藏了：)
Dickwin的专栏
02-12 1318
prototype 1.3.1 版本和之前的 1.2.0 版本有了不少改进,并增加了新的功能： 1. 增加了事件注册管理 2. 增加了空间定位的常用函数 3. 改善了 xmlhttp 的封装 4. 移除了 Effect.js，交给 Rico 或者 script.aculo.us 这些扩展库类实现。 5. bug 修复 代码: /**  * 定义一个全局对象, 属性 Version 在发布的
关 window 的 findByType
这里有个Blog
10-29 881
  在Ext.Window.findByType  中, 在tbar中的对象,是找不到的.以些类推一,在panel等其它的对象的tbar中应该也是找不到的(未证实,如有人证实,请也告诉我). 切记!
山东农业大学实用软件设计大赛落下帷幕
山东农业大学CSDN高校俱乐部
07-28 1338
2011年12月24日，由山东农业大学CSDN高校俱乐部承办的山东农业大学实用软件设计大赛落下帷幕。     本次比赛与去年不同，采取了自由选题，一赛制，进行两轮评定，与齐鲁大学生软件设计大赛同样的轮次。这也为大二同学参加齐鲁软件设计大赛奠定基础。参赛作品水平也据去年有很大提高。从毕业生论文选题系统到考试系统，从Android课表到网络词典，从屏幕测量工具到音乐播放器等等。充分发挥了同学们的想象
ExtJs 经典布局(一)
宇宙神帝
12-21 1838
function getInsertForm() { if (!insertForm) { insertForm = new Ext.FormPanel({ labelWidth : 100, monitorValid : true,// 把有formBind:true的按钮和验证绑定 baseCls : 'x-plain', autoHeight : t
extjs from布局怎么设置column宽度
最新发布
05-11
在 ExtJS 中使用布局的方式来设置 column 的宽度，可以使用 columnWidth 属性。 columnWidth 是一个相对值，它表示该列在父容器中所占的比例。例如，如果有两个列，一个 columnWidth 设置为 0.3，另一个设置为 0.7...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值