ExtJs中的Form表单基础篇

在软件开发中,通过Form表单向后台提交数据是一种很常见的行为.在使用ExtJs这种富客户端时,跟平时的html开发有一定的区别. 一般的jsp和struts2的开发为: <!-- lang: html --> <form action='UserAction_save.action' method='post'> 姓名: <input type='text' name='name'/> 年龄: <input type='text' name='age'/> <input type='submit' value='提交'> </form>

而在Ext中则不同;
先做个简单的例子!
<!-- lang: js -->
Ext.onready(function(){
    //创建放表单的容器window
    var win = Ext.create('Ext.window.Window',{
        title : '注册用户',
        width : 600,
        height :500,
        layout : 'fit',
        bodyPadding : 10,
        store : store,
        items :[
            {
                xtype : 'form',
                layout : 'fit',
                defaultfield :{
                    type : 'textfield'    //默认表单类型为文本框
                },
                url : '',  
                items : [
                    {
                        fieldLabel : '姓名',
                        name : 'name',
                        allowBlank : true,  //验证姓名必须填写
                        anchor : '100%'
                    },{
                        fieldLabel : '年龄',
                        name : 'age',
                        anchor: '100%',
                        allowBlank : true,
                        emptyText : '必须填' //当文本框空白时,显示的内容
                    }
                ],
                bbar : [
                    {
                        text : '保存',
                        iconCls : 'save', //按钮图片的css
                        handler : function(){
                            //保存的事件
                        }
                    }
                ]
            }
        ]
    });
    //显示窗体
    win.show();
});

转载于:https://my.oschina.net/KangL/blog/694386