EXTJS form表单提交的奇怪问题

Question

不可以提交代码
     var fpanel = new Ext.FormPanel({
        renderTo:Ext.getBody(),
        layout:'border',
        items:[{
            title:'用户登录',
            draggable  : false,
                renderTo:'loginDiv',
            monitorResize: true,
            width:'300px',
            height:'140px',
            frame:true,
            items:[
            {
                xtype:'textfield',
                fieldLabel:'用户名',
                labelAlign:'right',
                name:'username',
                labelWidth:60,
                width:280,
                allowBlank:false
            }
            ],
            buttons:[
            {
                text:'登录',
                handler:function(){
                    this.up("form").getForm().submit({
                        url:'a.jsp',
                        success:function(f,a){
                            Ext.Msg.alert('Success','It worked');
                            Ext.Msg.alert('操作',a.result.msg);
                        },
                        failure:function(f,a){
                            alert(f.url);
                            Ext.Msg.alert('Warning','Error');
                        }
                    });
                }
            }
            ]
        }]
      });可以提交代码
     var fpanel = new Ext.FormPanel({
        renderTo:Ext.getBody(),
        layout:'border',
        items:[{
            title:'用户登录',
            draggable  : false,
                renderTo:'loginDiv',
            monitorResize: true,
            width:'300px',
            height:'140px',
            frame:true,
            buttons:[
            {
                text:'登录',
                handler:function(){
                    this.up("form").getForm().submit({
                        url:'a.jsp',
                        success:function(f,a){
                            Ext.Msg.alert('Success','It worked');
                            Ext.Msg.alert('操作',a.result.msg);
                        },
                        failure:function(f,a){
                            alert(f.url);
                            Ext.Msg.alert('Warning','Error');
                        }
                    });
                }
            }
            ]
        }]
      });把items 去掉就可以提交了.很奇怪,各位大大帮帮忙

Answer 1

var fpanel = new Ext.FormPanel({
renderTo : 'loginDiv', //
// layout:'border', //这个登录不需要border布局 且border布局用法也不对
items : [{
title : '用户登录',
draggable : false,
// renderTo:'loginDiv', //Ext渲染只能有一次 外边渲染到body 里边渲染到loginDiv 您觉得对么？
monitorResize : true,
width : '300px',
height : '140px',
frame : true,
layout : 'form',// 要用form布局 textfield的label才能显示
items : [{
xtype : 'textfield',
fieldLabel : '用户名',
labelAlign : 'right',
name : 'username',
labelWidth : 60,
width : 280,
allowBlank : false
}],
buttons : [{
text : '登录',
handler : function() {
this.up("form").getForm().submit({
url : 'a.jsp',
success : function(f, a) {
Ext.Msg.alert('Success', 'It worked');
Ext.Msg.alert('操作', a.result.msg);
},
failure : function(f, a) {
alert(f.url);
Ext.Msg.alert('Warning', 'Error');
}
});
}
}]
}]
});

Answer 2

其实 楼主的代码可以很简化 Ext的代码尽量减少嵌套 
另外：现在流行Ext4 老的Ext现在已经很少用了~~var fpanel = new Ext.FormPanel({
renderTo : 'loginDiv',
title : '用户登录',
draggable : false,
monitorResize : true,
width : '300px',
height : '140px',
frame : true,
items : [{
xtype : 'textfield',
fieldLabel : '用户名',
labelAlign : 'right',
name : 'username',
labelWidth : 60,
width : 280,
allowBlank : false
}],
buttons : [{
text : '登录',
handler : function() {
this.up("form").getForm().submit({
url : 'a.jsp',
success : function(f, a) {
Ext.Msg.alert('Success', 'It worked');
Ext.Msg.alert('操作', a.result.msg);
},
failure : function(f, a) {
alert(f.url);
Ext.Msg.alert('Warning', 'Error');
}
});
}
}]
});

Answer 3

经测试发现:代码 allowBlank : false 影响表单的提交
1.去掉allowBlank : false后,可以看到数据提交信息:2.加上allowBlank : false后,看不到数据提交信息了: