ExtJs学习笔记(16)_Form布局

 

ExtJs学习笔记(16)_Form布局

这是最重要的一个布局，几乎所有的表单界面都可以采用form布局，详细的用法本文不作讨论(可以查阅官方API文档)，这里只给出一个简单的示例

< script type = " text/javascript " >
    Ext.onReady( function ()  {
        var win = new Ext.Window({
            title: "form Layout",
            height: 150,
            width: 230,
            plain: true,
            bodyStyle: 'padding:15px',
            items: 
            {
                xtype: "form",
                labelWidth: 30,
                defaultType: "textfield",
                frame:true,
                items: 
                [
                    {
                        fieldLabel:"姓名",
                        name:"username",
                        allowBlank:false
                    },
                    {
                        fieldLabel:"呢称",
                        name:"nickname"
                    },
                    {
                        fieldLabel: "生日",
                        xtype:'datefield',
                        name: "birthday",
                        width:127
                    }
                ]
            }
        });
        win.show();
    } );
< / script>

效果图: