关于EXTJS6 grid布局 20C

图片说明

这是小弟做的一个EXTJS的form表单,表单的第二栏也就是装修公司选择的那里,有两个gr grid,他们现在是上下,我怎么让它左右显示,也就是左边一个grid右边一个grid

3个回答

panel的layout: 'column'就行了,items改为你的组件,去掉html

  Ext.create('Ext.Panel', { renderTo: document.body, title: 'layout column', layout: 'column',items: [{ columnWidth: .5, html: 'column1' }, { columnWidth: .5, html: 'column2' }] })
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复qq_34532107: 高度要配置上。
3 年多之前 回复
qq_34532107
qq_34532107 换成你这种写法,加上去之后只显示一条直线,什么都没有,原来的数据也不显示了
3 年多之前 回复

救你发的这个代码没有问题,可以分2列,不过没有extjs6,是版本4.1的
图片说明

  Ext.onReady(function(){
        var memberForm = new Ext.form.FormPanel({
            baseCls: "x-plain",
            bodyStyle: 'padding:10px',
            enctype: 'multipart/form-data',
            fileUpload: true,
            autoScroll: true,
            layout: 'column',
            items: [{
                columnWidth: .5,/////////////////
                xtype: 'fieldset',
                title: '客户详情',
                checkboxToggle: true,
                defaultType: 'checkbox',
                defaults: {
                    xtype: 'textfield',
                    anchor: '90%',
                    labelAlign: 'right',
                    labelWidth: 120
                },
                items: [{
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    combineErrors: true,
                    defaults: {
                        xtype: 'field',
                        labelAlign: 'right',
                        labelWidth: 90
                    },

                    items: [{
                        fieldLabel: '客户姓名',
                        id: 'memberName',
                        name: 'name',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'

                    }, {
                        fieldLabel: '客户手机',
                        id: 'memberMobile',
                        name: 'mobile',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'

                    }, {
                        fieldLabel: ' 喜欢风格',
                        name: 'likeStyle',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }, {
                        labelAlign: 'right',
                        fieldLabel: '预算总额',
                        name: 'reqMoneyCnt',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }]
                }, {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    combineErrors: true,
                    defaults: {
                        xtype: 'field',
                        labelAlign: 'right',
                        labelWidth: 90
                    },

                    items: [{
                        fieldLabel: '需求房间',
                        name: 'roomNum',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }, {
                        fieldLabel: '卫生间数',
                        name: 'toiletNum',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }, {
                        fieldLabel: '厨房数量',
                        name: 'kitchenNum',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }, {
                        fieldLabel: '面积',
                        name: 'areaSize',
                        width: 120,
                        flex: 1,
                        margin: '0 0 0 6'
                    }]
                }, {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    combineErrors: true,
                    defaults: {
                        xtype: 'field',
                        labelAlign: 'right',
                        labelWidth: 90
                    },

                    items: [{
                        fieldLabel: '回访的描述',
                        id: 'callBackMemo',
                        name: 'callBackMemo',
                        flex: 1,
                        margin: '0 0 0 6'
                    }, {
                        xtype: "datefield",
                        fieldLabel: '需求时间',
                        name: "reqTime",
                        id: "reqTime",
                        emptyText: "--请选择--",
                        format: "Y/m/d",// 日期的格式
                        altFormats: "Y/m/d|Ymd",
                    }, {
                        xtype: "datefield",
                        fieldLabel: '回访时间',
                        name: "callBackTime",
                        id: "callBackTimeId",
                        emptyText: "--请选择--",
                        format: "Y/m/d",// 日期的格式
                        altFormats: "Y/m/d|Ymd",
                    }]
                }]

            }, {
                columnWidth: .5,//////////////
                xtype: 'fieldset',
                title: '装修公司',
                checkboxToggle: true,
                defaults: {
                    anchor: '40%',
                    labelAlign: 'right',
                    labelWidth: 120
                },
                items: [{
                    xtype: 'grid',
                    id: 'grid1',
                    columnLines: true,
                   // store: orderDetailstore,
                    columns: [{
                        text: '公司名字(双击选择)',
                        dataIndex: 'name',
                        flex: 1
                    }]
                }, {
                    xtype: 'grid',
                    id: 'grid2',
                    columnLines: true,
                    columns: [{
                        text: '已选公司(双击取消)',
                        dataIndex: 'name',
                        flex: 1
                    }]

}]
}],
renderTo:document.body
});

});

表单代码:

// 订单信息form
var memberForm = new Ext.form.FormPanel({
baseCls : "x-plain",
bodyStyle : 'padding:10px',
enctype : 'multipart/form-data',
fileUpload : true,
autoScroll : true,

            items : [ {
                        xtype : 'fieldset',
                        title : '客户详情',
                        checkboxToggle : true,
                        defaultType : 'checkbox',
                        defaults : {
                            xtype : 'textfield',
                            anchor : '90%',
                            labelAlign : 'right',
                            labelWidth : 120
                        },
                        items : [{
                                    xtype : 'fieldcontainer',
                                    layout : 'hbox',
                                    combineErrors : true,
                                    defaults : {
                                        xtype : 'field',
                                        labelAlign : 'right',
                                        labelWidth : 90
                                    },

                                    items : [{
                                                fieldLabel : '客户姓名',
                                                id : 'memberName',
                                                name : 'name',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'

                                            },{
                                                fieldLabel : '客户手机',
                                                id : 'memberMobile',
                                                name : 'mobile',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'

                                            }, {
                                                fieldLabel : ' 喜欢风格',
                                                name : 'likeStyle',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            },{
                                                labelAlign : 'right',
                                                fieldLabel : '预算总额',
                                                name : 'reqMoneyCnt',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }]
                                }, {
                                    xtype : 'fieldcontainer',
                                    layout : 'hbox',
                                    combineErrors : true,
                                    defaults : {
                                        xtype : 'field',
                                        labelAlign : 'right',
                                        labelWidth : 90
                                    },

                                    items : [{
                                                fieldLabel : '需求房间',
                                                name : 'roomNum',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }, {
                                                fieldLabel : '卫生间数',
                                                name : 'toiletNum',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }, {
                                                fieldLabel : '厨房数量',
                                                name : 'kitchenNum',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }, {
                                                fieldLabel : '面积',
                                                name : 'areaSize',
                                                width : 120,
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }]
                                }, {
                                    xtype : 'fieldcontainer',
                                    layout : 'hbox',
                                    combineErrors : true,
                                    defaults : {
                                        xtype : 'field',
                                        labelAlign : 'right',
                                        labelWidth : 90
                                    },

                                    items : [ {
                                                fieldLabel : '回访的描述',
                                                id : 'callBackMemo',
                                                name : 'callBackMemo',
                                                flex : 1,
                                                margin : '0 0 0 6'
                                            }, {
                                                xtype : "datefield",
                                                fieldLabel : '需求时间',
                                                name : "reqTime",
                                                id : "reqTime",
                                                emptyText : "--请选择--",
                                                format : "Y/m/d",// 日期的格式
                                                altFormats : "Y/m/d|Ymd",
                                            }, {
                                                xtype : "datefield",
                                                fieldLabel : '回访时间',
                                                name : "callBackTime",
                                                id : "callBackTimeId",
                                                emptyText : "--请选择--",
                                                format : "Y/m/d",// 日期的格式
                                                altFormats : "Y/m/d|Ymd",
                                            }]
                                }]

                    },  {
                        xtype : 'fieldset',
                        title : '装修公司',
                        checkboxToggle : true,
                        defaults : {
                            anchor : '40%',
                            labelAlign : 'right',
                            labelWidth : 120
                        },
                        items : [{
                            xtype : 'grid',
                            id : 'grid1',
                            columnLines : true,
                            store : orderDetailstore,
                            columns : [ {
                                text : '公司名字(双击选择)',
                                dataIndex : 'name',
                                flex : 1
                            }]
                        },{
                            xtype : 'grid',
                            id : 'grid2',
                            columnLines : true,
                            columns : [ {
                                text : '已选公司(双击取消)',
                                dataIndex : 'name',
                                flex : 1
                            }]
                        }]
                    }],

        });
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐