qq_34532107
qq_34532107
采纳率20%
2017-05-19 08:17 阅读 1.8k

关于EXTJS6 grid布局

20

图片说明

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • showbo GoCityPass新加坡曼谷通票 2017-05-19 08:33

    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' }] })
    
    点赞 2 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2017-05-19 09:33

    救你发的这个代码没有问题,可以分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
    });

    });
    
    点赞 2 评论 复制链接分享
  • qq_34532107 qq_34532107 2017-05-19 08:22

    表单代码:

    // 订单信息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
                                }]
                            }]
                        }],
    
            });
    
    点赞 评论 复制链接分享

相关推荐