ExtJs中的Form表单基础篇
ExtJs中的Form表单基础篇
乔康007 发表于1年前
ExtJs中的Form表单基础篇
  • 发表于 1年前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

在软件开发中,通过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();
});
共有 人打赏支持
粉丝 3
博文 12
码字总数 7726
×
乔康007
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: