ExtJS布局

需要的效果

写了3中实现方式

// 页面排版anchor
        var panel = Ext.create('Ext.form.Panel', {
                    border : false,
                    layout : 'anchor',
                    items : [{
                        frame : true,
                        border : false,
                        anchor : '100% 35%',
                        items : [saveBtn, closeBtn, teacherName, idCard,
                                chooseDate, lessonTime, addLesson, delLesson]
                    }, {
                        anchor : '100% 65%',
                        layout : 'fit',
                        items : [secondGrid]
                    }]
                });

    // 页面排版vbox
        var panel2 = Ext.create('Ext.form.Panel', {
                    border : false,
                    layout : {
                        type : 'vbox',
                        align : 'stretch'
                    },
                    items : [{
                        flex : 3.5,
                        frame : true,
                        items : [saveBtn, closeBtn, teacherName, idCard,
                                chooseDate, lessonTime, addLesson, delLesson]
                    }, {
                        layout : 'fit',
                        flex : 6.5,
                        items : [secondGrid]
                    }]
                });

    // 页面排版vbox
        var panel2 = Ext.create('Ext.form.Panel', {
                    border : false,
                    layout : {
                        type : 'vbox',
                        align : 'stretch'
                    },
                    items : [{
                        flex : 3.5,
                        frame : true,
                        items : [saveBtn, closeBtn, teacherName, idCard,
                                chooseDate, lessonTime, addLesson, delLesson]
                    }, {
                        layout : 'fit',
                        flex : 6.5,
                        items : [secondGrid]
                    }]
                });