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();
});