ExtJS2 注册表单

<!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>第一个表单程序</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="../ext-2.3.0/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="../ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="../ext-2.3.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
    Ext.onReady(function(){
                
        //类似于自定义类型
        var JOB = Ext.data.Record.create([{name:'job'}]);
                            
        new Ext.form.FormPanel({
            title:"注册窗体",
            width:500,
            height:450,
            plain:true,
            layout:"form",
            labelWidth:60,
            frame:true,
            renderTo:Ext.getBody(),
            bodyStyle:"padding:5px",//边框样式
            defaultType:"textfield",
            buttonAlign:'right',
            url:"http://localhost/extjs/listJson.ashx" ,
            waitMsgTarget:true,//设置将正在加载的提示限制在窗体中
            //anchor:'90%',
            listeners:{
                'actioncomplete':function(_form,_action){
                    alert(_action.response.responseText);
                    alert("完成");
                },
                'actionfailed':function(_form,_action){
                    //alert(_action.response.responseText);
                    alert("提交失败"+_action.result.errors);
                }
            },
            buttons:[
                {
                    text:"确定",
                    handler:function(){
                        alert("开始提交");
                        this.ownerCt.getForm().submit({url:'http://localhost/extjs/listJson.ashx',waitTitle:'提示',waitMsg:'正在提交...'});
                    }
                },
                {
                    text:"载入",
                    handler:function(){
                        this.ownerCt.getForm().load({url:'http://localhost/extjs/xml/contacts.xml',wiatTitle:'载入中',waitMsg:'Loading'});
                    }
                },
                {
                    text:"重置",
                    handler:function(){
                        this.ownerCt.getForm().reset();
                    }
                }
            ],
            errorReader:new Ext.data.XmlReader({
                record:''
            }),
            reader:new Ext.data.XmlReader({
                record:"contact"
            },[{name:"birthday",mapping:"dob"}]),
            items:[{
                baseCls:"x-plain",
                xtype:"panel",
                layout:"column",
                items:[
                    {                     
                        columnWidth:.5,
                        layout:"form",
                        labelWidth:55,
                        style:"padding:5px",
                        defaultType:"textfield",
                        defaults:{width:160},
                        baseCls:"x-plain",
                        items:[
                            {fieldLabel:"姓名"},
                            {
                                fieldLabel:"姓名",
                                value:21,
                                //readOnly:true
                                name:'birthday'
                            },
                            {
                                xtype:'datefield',
                                format:'Y-m-d',
                                readOnly:true,
                                //name:'birthday',
                                //value:'1991-02-09',
                                maxValue:new Date(),
                                fieldLabel:"姓名",
                                listeners:{
                                    "blur":function(_df){
                                        var _age = _df.ownerCt.findByType('textfield')[1];
                                        _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1);
                                    }
                                }
                            },
                            {fieldLabel:"姓名"},
                            {fieldLabel:"姓名"},
                            {fieldLabel:"姓名",name:'aaa'},
                            {
                                xtype:'combo',
                                fieldLabel:"性别",
                                mode:'local',
                                displayField:'sex',
                                readOnly:true,
                                triggerAction:'all',
                                store:new Ext.data.SimpleStore({fields:["sex"],data:[["男"],["女"]]})}
                        ]
                    },
                    {
                        columnWidth:.5,
                        layout:"form",
                        baseCls:"x-plain",
                        labelWidth:45,
                        items:[
                            {
                                xtype:"textfield",                            
                                fieldLabel:"照片",
                                inputType:"image",
                                width:180,
                                height:170,
                                listeners:{
                                    "render":function(_field){
                                        _field.getEl().dom.src = "img.png";
                                    }
                                }
                            }
                        ]
                    }
                ] 
            },
            {
                fieldLabel:"3333",
                width:400,
                enableKeyEvents:true,
                listeners:{
                    keydown:function(){
                        alert('KeyDown');
                    },
                    keypress:function(){
                        alert('KeyPress');
                    }
                }
            },
            {
                fieldLabel:"3333",
                width:400
            },{
                xtype:'panel',
                layout:'column',
                baseCls:'x-plain',
                defaults:{baseCls:'x-plain'},
                items:[{
                    cloumnWidth:.3,
                    layout:'form',
                    labelWidth:60 ,
                    items:{
                        fieldLabel:"职位",                      
                        xtype:'combo',
                        anchor:'90%',                     
                        mode:'local',
                        displayField:'job',
                        readOnly:true,
                        triggerAction:'all',
                        listeners:{
                            select:function(_combo,_record,_index){
                                    _combo["selectItem"] = _record;
                                }
                        },
                        store:new Ext.data.SimpleStore({fields:["job"],data:[["程序员"],["工程师"],["总管"],["经理"]]})
                    }
                },{
                    columnWidth:.15,
                    bodyStyle:'padding-left:5px',
                    items:{
                        xtype:'button',
                        text:'添加职位',
                        handler:function(){
                            var _window = this.ownerCt.ownerCt.ownerCt;
                            var _job = _window.findByType('combo')[1];
                                    
                            Ext.MessageBox.prompt("增加职位","请输入要添加的职位的名称",function(_btn,_text){
                                                                                    //回调函数的第一个参数是用户点击了哪个按钮,第二个参数是用户输入的文本
                                                                                    //第四个参数将作用域设置为combo控件
                                                                                    if(_btn == 'ok')
                                                                                    {
                                                                                        var _store = this.store;
                                                                                        //创建自定义类型实例
                                                                                        _store.insert(0,new JOB({job:_text}));
                                                                                        this.setValue(_text);
                                                                                        this["selectItem"] = _store.getAt(0);
                                                                                    }
                                                                                 },_job);
                        }
                    }
                },{
                    columnWidth:.15,
                    bodyStyle:'padding-left:5px',
                    items:{
                        xtype:'button',
                        text:'修改职位',
                        handler:function(){
                            if(this["selectItem"] != null){
                            var _window = this.ownerCt.ownerCt.ownerCt;
                            var _job = _window.findByType('combo')[1];
                            Ext.MessageBox.prompt("修改职位","请输入新的职位名称名称",function(_btn,_text){
                                                                                    if(_btn == 'ok')
                                                                                    {                         
                                                                                        this["selectItem"].set("job",_text);
                                                                                        this.setValue(_text);
                                                                                    }
                                                                                },_job,false,_job.getValue());
                            }
                        }
                    }
                },{
                    columnWidth:.15,
                    bodyStyle:'padding-left:5px',
                    items:{
                        xtype:'button',
                        text:'删除职位',
                        handler:function(){
                            if(this["selectItem"] != null){
                            var _window = this.ownerCt.ownerCt.ownerCt;
                            var _job = _window.findByType('combo')[1];
                            Ext.MessageBox.confirm("提示信息","是否真的要删除该职位",function(_btn){
                                                                                    if(_btn == 'yes')
                                                                                    {     
                                                                                        try{
                                                                                            this.store.remove(this["selectItem"]);
                                                                                        }catch(_err){}
                                                                                        if(this.store.getCount()>0)
                                                                                        {
                                                                                                    
                                                                                            this.setValue(this.store.getAt(0).get("job"));
                                                                                            this["selectItem"] = this.store.getAt(0);
                                                                                        }
                                                                                        else
                                                                                        {
                                                                                            this.setValue("");
                                                                                            this["selectItem"] = null;
                                                                                        }
                                                                                    }
                                                                                },_job);
                            }
                        }
                    }
                }]
            }]        
        });
            
                
    });
</script>
</head>
<body>
</body>
</html>

点击查看原图

知识共享许可协议
《ExtJS2 注册表单》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     168.64ms