Ext formpanel的问题，急急急

Question

我要生成一个页面，效果就是排成两列，但使用如下代码生成出来的却是如下图的效果，只有一行，连label都没有，请问是哪儿有问题，代码：
var formPanel = new Ext.form.FormPanel({
            id: 'ndjhform',
            xtype: 'fieldset',
            //plain: true,
            layout: "column",
            defaultType: "textfield",
            labelWidth: 85,
            baseCls: "x-plain",
            //锚点布局-
            defaults: { anchor: "95%", msgTarget: "side" },
            buttonAlign: "center",
            bodyStyle: "padding:0 0 0 0",
            items: [{
//                buttonAlign: "center",
//                layout : 'column', 
//                bodyStyle : 'background:transparent', 
//                border : false, 
//                items: [{
                        columnWidth: .5,
                   layout: 'form',
                   bodyStyle: 'background:transparent',
                   border: false,
                   items: [
                            this.begindDate,
                            this.dwbmCombobox,
                            this.xxtsText,
                            this.dwbmText,
                            this.zbbmText
                        ]
                        },{
                            columnWidth: .5,
                       layout: 'form',
                       bodyStyle: 'background:transparent',
                       border: false,
                       items: [
                                this.endDate,
                                this.zbbmCombobox,
                                this.zbbmgrid,
                                this.dwmcText,
                                this.IDText
                            ]
                        //}]
                }]
        });        return formPanel;
    },
生成效果如下

Answer 1

是跟layout有关还是其他的原因呢

Answer 2

LZ将第5行的
layout: "column",
改成
layout: "form",
试试

Answer 3

LZ你的第13~18行的不能注释掉啊..那表示的时按column（行）排列，也就是其中所有的items占一行

Answer 4

bodyBorder: false,
        frame: true,
        fileUpload:true,
        style:'padding:1px',
        items: [
        {
            xtype: 'fieldset',
         labelWidth: 115,
            title:this.processeDetailText,
            layout:'form',
            collapsible: true,
            labelAlign : "left",
            autoHeight: true,
            items: [
            {
             // 第一行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: this.barcodeidText,
                name: '',
                xtype: 'textfield',
                allowBlank:false,
            }]
              },
              {
               columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: this.sampleNameText,
                name: '',
                xtype: 'textfield',
                allowBlank:false,
readOnly:true                 
            }]
        }]
            },{
             // 第二行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'textfield',
                allowBlank:false
            }]
              },
              {
             columnWidth : .5,
             layout : "form",
             items: 
             [
             new Ext.form.ComboBox({})
             ]
              }]
            },{
             // 第三行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items: 
             [
             new Ext.form.ComboBox({})
             ]
              },
              {
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'datefield',
                format:'Y-m-d',
                width: 127,
                allowBlank:false
            }]
              }]
            },{
             // 第四行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'numberfield',
                allowBlank:false,
                readOnly: true
             }]
              },
              {
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'numberfield',
                regex: /^[0-9]+([.]{1}[0-9]{1,2})?$/,
             regexText: this.errorNumber,
                allowBlank: false,
                readOnly: true
            }]
              }]
            },{
             // 第五行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'numberfield',
                allowBlank:false,
                readOnly: true
             }]
              },
              {
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'textfield',
                allowBlank:false,
                regex: /(.*)(\.pdf)$/,
             regexText: this.errorNumber,
                readOnly:true
            }]
              }]
            },{
             // 第六行
             layout : "column",
             items: 
             [{
             columnWidth : .5,
             layout : "form",
             items:  
             [
             new Ext.form.ComboBox({})
             ]
              },
              {
             columnWidth : .5,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'textfield',
                allowBlank:false
            }]
              }]
            },{ 
             // 第七行
             layout : "column",
             items: 
             [{
             columnWidth : 1.,
             layout : "form",
             items: 
             [{
                fieldLabel: ,
                name: '',
                xtype: 'textarea',
             width: 452,
             allowBlank:true
            }]
              }]
            },{
             // hidden
             layout : "column",
             items: 
             [{ 
               columnWidth : 0,
             layout : "form",
             items: 
             [{
                name: '',
                xtype:'hidden',
                allowBlank:false
            }]
        },
        {
               columnWidth : 0,
             layout : "form",
             items: 
             [{
                name: '',
                xtype:'hidden',
                allowBlank:false
            }]
        }]
            }]
        }]lz先试试这个，关键地方自己补全哈

Answer 5

            defaultType: "textfield",
            labelWidth: 85,
            baseCls: "x-plain",
            //锚点布局-
            defaults: { anchor: "95%", msgTarget: "side" },这几个属性造成的 既然你的items里边不是都是textfield 那干嘛还写这个defaultType
把defaults公共属性去掉 你每个组件都anchor了 不合适 
还要提醒楼主 你的items里的this.什么什么 this指代有问题你在下边这个基础上加样式调一下就ok了var formPanel = new Ext.form.FormPanel({
autoHeight : true,
labelWidth : 50,
items : [{
layout : 'column',
items : [{
columnWidth : .5,
layout : 'column',
items : [/*把组件放进来*/]
}, {
columnWidth : .5,
layout : 'form',
items : [/*把组件放进来*/]
}]
}]
});

Answer 6

我把defaultType去掉之后，出错，必须要有defaultType吗

Answer 7

defaultType不是必须的 这个属性是为了当你的items中都是清一色的同类型组件时 写一个defaultType就行 这样里边所有的组件就不用写xtype了 我上边给你写提示的几个点有看到么？
另外：下边这段代码是我删了defaultType后测试的 没有错误啊
var formPanel = new Ext.form.FormPanel({
id : 'ndjhform',
xtype : 'fieldset',
// plain: true,
renderTo : Ext.getBody(),
layout : "column",
labelWidth : 85,
baseCls : "x-plain",
// 锚点布局-
defaults : {
anchor : "95%",
msgTarget : "side"
},
buttonAlign : "center",
bodyStyle : "padding:0 0 0 0",
items : [{
columnWidth : .5,
layout : 'form',
bodyStyle : 'background:transparent',
border : false,
items : [new Ext.form.TextField({
id : "d_text",
width : 300,
labelWidth : 100,
fieldLabel : "sdfsdf",
name : name
}) ]
}, {
columnWidth : .5,
layout : 'form',
bodyStyle : 'background:transparent',
border : false,
//我自己定义了个textfield 做测试
items : [new Ext.form.TextField({
id : "w_text",
width : 300,
labelWidth : 100,
fieldLabel : "sdfsdf",
name : name
}) ]
}]
});

Answer 8

lz好好看看ext自带的例子就知道了。

Answer 9

var formPanel=。
这段代码是在CreateForm: function(){}中的，同时控件的定义也是在这个方法体中，然后在另一个方法中调用的这个CreateForm方法，不知道跟这个有没有关系？

Answer 10

原来是因为this.beginDate这个控件的原因，控件源码如下
this.beginDate = new Ext.form.DateField({
            fieldLabel: '<font color=red>开始时间</font>',
            name: 'begindate',
            readOnly: false,
            selectOnFocus: true,
            allowBlank: true,
            blankText: "开始时间不允许为空",
            format: 'Y-m-d',
            anchor: '90%'
        });
加上这个控件，就会报错，除去这个控件，就没问题，请帮忙看看这个控件哪儿有问题？

Answer 11

我8楼提醒过你了 this的指代有问题  你把this提出为一个局部变量me 写在哪需要看你的代码结构 但我猜测你把var me = this 这句话放到var formPanel 之前 将原来的this.beginDate换成me.beginDate应该就可以了 
如果不行 那还是请你把你的代码结构都发上来吧

Answer 12

这是源码，请帮忙分析一下
Ext.onReady(function() {
        this.beginDate = new Ext.form.DateField({
            fieldLabel: '<font color=red>开始时间</font>',
            name: 'begindate',
            readOnly: false,
            selectOnFocus: true,
            allowBlank: true,
            blankText: "开始时间不允许为空",
            format: 'Y-m-d'
            //anchor: '90%'
        });
        
        this.endDate = new Ext.form.DateField({
            fieldLabel: '<font color=red>结束时间</font>',
            name: 'enddate',
            readOnly: false,
            selectOnFocus: true,
            allowBlank: true,
            blankText: "结束时间不允许为空",
            format: 'Y-m-d'
            //anchor: '90%'
        });
        
//        this.dwbmCombobox = new Ext.form.TreeField({
//            name: 'dwbm',
//            fieldLabel: '<font color=red>单位</font>',
//            emptyText: '请选择单位...',
//            anchor: '90%',
//            listHeight: 200,
//            valueField: 'id',
//            hiddenName: 'dw',
//            readOnly: false,
//            dataUrl: './Data/admin_l1/dwxxb.aspx?action=find&type=jcdw_jlz'
//        });        this.zbbmstore = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
         url : './Data/sbz/zbbmb.aspx?action=find', 
         method : 'POST' 
      }), 
      reader : new Ext.data.JsonReader({
         totalProperty : 'totalCount', 
         root : 'data' 
       }, 
       [
        "zbbm",
      "zbmc"
     ]
      )
    });
    
    this.zbbmCombobox = new Ext.form.ComboBox( {
      fieldLabel : '<font color=red>装备</font>', 
      store : this.zbbmstore, 
      valueField : 'zbbm',
      displayField : 'zbmc', 
      hiddenName : 'zb', 
      editable : true, 
      anchor : '90%', 
      mode : 'local', 
      triggerAction : 'all',
      blankText : '请选择装备', 
      emptyText : '请选择装备...', 
      name : 'zb', 
      allowBlank : false, 
      forceSelection : true
    });
   
    this.addzbButton = new Ext.Button({
            text: "添加装备",
            width:80,
            handler: this.onAddzb,
            scope: this
        });
   
    this.xxtsText = new Ext.form.TextArea({
            name: 'xxts',
            height : 80,
            readOnly: true
        });
        
    this.zbbmText = new Ext.form.TextField({
            name: 'zbbm',
            readOnly: true,
            hidden: false
        });        this.zbbmCombobox.on("select", this.selectzbbmAction, this);        this.dwbmText = new Ext.form.TextField({
            name: 'dwbm',
            readOnly: true,
            hidden: false
        });        this.dwmcText = new Ext.form.TextField({
            name: 'dwmc',
            readOnly: true,
            hidden: false
        });
    
        this.IDText = new Ext.form.TextField({
            name: 'id',
            readOnly: true,
            hidden: false
        });
        
        this.zbcm = [{header: "序号",
    dataIndex: "id",
    tooltip: "序号",
    hidden: true,
    //可以进行排序
    sortable: true,
    align: 'center'}];
    
        this.zbbmsstore = new Ext.data.JsonStore({
            id: "SearchGridStore",
            url: './Data/jljh/ndjhb.aspx?action=getzb',
            root: "data",
            totalProperty: "totalCount",
            remoteSort: false,
            fields: ['zbmc']
        });        this.zbbmgrid = new Ext.grid.GridPanel({
            id: "zbgridid",
            title: "装备列表",
            region: "center",
            store: this.zbbmsstore,
            columns: this.zbcm,
            stripeRows: true,
            width: 510,
            height: 450,
            loadMask: (
              { msg: '正在加载数据……' }
              ),
            tbar: [
               {
                   text: '删除',
                   iconCls: 'remove',
                   tooltip: '删除纪录',
                   handler: this.onDelelte,
                   scope: this
               }
            ]
        });
        
        var formPanel = new Ext.form.FormPanel({
            id : 'ndjhform',
            xtype : 'fieldset',
            // plain: true,
            renderTo : Ext.getBody(),
            layout : "column",
            labelWidth : 85,
            baseCls : "x-plain",
            // 锚点布局-
            defaults : {
                anchor : "95%",
                msgTarget : "side"
            },
            buttonAlign : "center",
            bodyStyle : "padding:0 0 0 0",
            items : [{
                columnWidth : .5,
                layout : 'form',
                bodyStyle : 'background:transparent',
                border : false,
                items : [
                    this.begindDate,
                    this.xxtsText,
                    this.dwbmText,
                    this.zbbmText
                ]
            }, {
                columnWidth : .5,
                layout : 'form',
                bodyStyle : 'background:transparent',
                border : false,
        //我自己定义了个textfield 做测试
                items : [new Ext.form.TextField({
                    id : "w_text",
                    width : 300,
                    labelWidth : 100,
                    fieldLabel : "sdfsdf",
                    name : name
                })                ]
            }]
        });
        });

Answer 13

有点小崩溃，但还是学了很多东西，谢谢fanchuanzhidu