Ext中formPanel面板布局 愁死了

Question

JS代码：
Fax.form.ServiceConfigPanel = Ext.extend(Ext.form.FormPanel, {
frame : true,
autoHeight : false,
hight : 300,
width : 600,
renderTo : Ext.getBody(),
bodyStyle : "padding-top:50px;padding-left:100px;paddint-bottom:100px;padding-right:100px",
initComponent : function() {
this.items = [{
xtype : 'textfield',
name : 'Transceiver.ip',
fieldLabel : '本机IP',
anchor : '-20'
}, {
fieldLabel : '服务器应用地址',
name : 'PoolServer.base.url',
xtype : 'textfield'
}, {
fieldLabel : 'URL',
xtype : 'textfield',
name : 'url' }, {
fieldLabel : '用户名称',
xtype : 'textfield',
name : 'userName' }, {
fieldLabel : '密码',
xtype : 'textfield',
name : 'password'
}
]
buttons:[{text:"确定"},{text:"取消"}],放在这，这两个button在页面不能显示 Fax.form.ServiceConfigPanel.superclass.initComponent.call(this)
}
});
然后在html页面中是这样调用
<script type="text/javascript"><!--
    Ext.onReady(function(){
     else if("服务器设置"==title)
 {
         
Ext.getCmp("contentBodyPanel").add(new Fax.form.ServiceConfigPanel
(
     {
          但放在这就能正常显示，但却处于form之外，离文本框太远          
          closable:true,
          title:title,
          id:title,
          iconCls:'serviceConfig',
          autoShow:true
      }
)
          ).show();-->
问题我代码都在上面了，希望哪位能够指教一下

Answer 1

如果是单纯的显示一个form
没有其他复杂的操作建议不要写成extend继承方式，对初学者来说比较难理解

Answer 2

上面的代码可以简化些var form = new Ext.form.FormPanel({
    frame: true,
    autoHeight: false,
    height: 180,
    width: 400,
    buttonAlign:"center",
    renderTo: Ext.getBody(),
    items: [
     {
         xtype: 'textfield',
         name: 'Transceiver.ip',
         fieldLabel: '本机IP',
         anchor: "90%"
     }, {
         fieldLabel: 'URL',
         xtype: 'textfield',
         name: 'url',
         anchor: "90%"
     }, {
         fieldLabel: '用户名称',
         xtype: 'textfield',
         name: 'userName',
         anchor: "90%"
     }, {
         fieldLabel: '密码',
         xtype: 'textfield',
         name: 'password',
         anchor: "90%"
     }
    ],buttons:[
        {
          text:"确定"
        },{
         text:"取消"
        }
    ]
})

Answer 3

是不是在Buttons上面少了个逗号啊。

Answer 4

var form = new Ext.form.FormPanel({
    frame: true,
    autoHeight: false,
    height: 180,
    width: 400,
    buttonAlign:"center",
    renderTo: Ext.getBody(),
    buttons:[{text:"确定"},{text:"取消"}]
    ....
   
items然后可以用你的init函数加载即可