ext表單中一行多列的佈局

關鍵字: ext表單中一行多列的佈局

 

var simpleForm = new Ext.FormPanel({
            labelAlign : 'left',
            title : '表單例子',
            buttonAlign : 'right',
//            bodyStyle : 'padding:5px',
            width : 600,
            frame : true,
            labelWidth : 80,
            items : [{
                        layout : 'column', // 定義該元素爲佈局爲列布局方式
                        border : false,
                        labelSeparator : '：',
                        items : [{
                                    columnWidth : .5, // 該列佔用的寬度，標識爲50％
                                    layout : 'form',
                                    border : false,
                                    items : [{ // 這裏可以爲多個Item，表現出來是該列的多行
                                        cls : 'key',
                                        xtype : 'textfield',
                                        fieldLabel : '用戶名',
                                        name : 'name',
                                        anchor : '90%'
                                    }]
                                }, {
                                    columnWidth : .5,
                                    layout : 'form',
                                    border : false,
                                    items : [{
                                                cls : 'key',
                                                xtype : 'textfield',
                                                inputType : 'password',
                                                fieldLabel : '口令',
                                                name : 'passwd',
                                                anchor : '90%'
                                            }]
                                }]
                    }]

        });