Question

extjs Ext.FormPanel add 多个文本框 怎么不能横向排序

var _textfield = { id:'p_insto40e4842642dbafc70142dbc698cf001d' , name:'p_insto' ,xtype:'textfield' , fieldLabel: '机构', readOnly: 'fasle' ,anchor: '70%', allowBlank: 'false' };
report_SForm.add(_textfield);
report_SForm.doLayout();
var _field={ id:'ew4340e4842642dbafc70142dbc698cf001d' , name:'ew43' ,xtype:'textfield' , fieldLabel: '3443', readOnly: 'fasle' ,anchor: '70%', allowBlank: 'false' };
report_SForm.add(_field);
report_SForm.doLayout();
var report_SForm = new Ext.FormPanel(
{
region : 'center',
id : 'aaa',
title : bundle.getMsg('report_STab.title'),
buttonAlign : 'center',
bodyStyle : 'padding:5px 5px 0',
waitMsgTarget : true,
cls : 'main_bg',
closable : true,
header : false,
// collapsible : true,
autoScroll : true,
frame : true

});
因为文本框的内容都是从数据库动态读取生成,有可能读取5个不同文本框,加载到Ext.FormPanel,怎么让文本框横向排序三个文本框,然后换行排序两个文本框

Answer 1

extjs的页面位置都靠布局layout来实现。

像你这种情况，使用layout:'column'布局来实现。

给你一个参考代码，页面显示三列，每个列有两个，最后一列一个

var top = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.33,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.33,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            },{
               columnWidth:.33,
               layout: 'form',
               items: [{
                   xtype:'textfield',
                   fieldLabel: 'Last Name',
                   name: 'last',
                   anchor:'95%'
               }]
           }]
        }],
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

Answer 2

同参考，这边加个表格样式

Answer 3

放到 一个 panel里面 加个 布局呗