Extjs Column布局常见问题及解决方法

第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

 

实例代码如下：

view plaincopy to clipboardprint?
Ext.onReady(function(){  
 
      
            Ext.QuickTips.init();  
 
    // turn on validation errors beside the field globally  
    Ext.form.Field.prototype.msgTarget = 'side';  
 
    var bd = Ext.getBody();  
 
var detailForm = new Ext.FormPanel({  
        id:"detail",  
        layout:"form",  
        labelWidth: 60,  
        labelAlign:"right",  
        border:false,  
        frame:true,  
        width: 600,//宽度设置要合理，如果FormPanel的宽度小于控件的宽度，column布局时控件不能正常显示  
        height:400,  
//      autoHeight:true,  
//      defaultType: 'textfield',//column布局时不能设置该属性，否则不能正常显示  
        items: [{//第一行  
            layout:"column",  
            items:[{  
                columnWidth:.3,//第一列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同编号',  
                    name: 'contractId',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第二列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同名称',  
                    name: 'contractId1',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第三列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同',  
                    name: 'contractId2',  
                    width:100  
                    }]  
            }]},//第一行结束  
            {//第一行  
            layout:"column",  
            items:[{  
                columnWidth:.3,//第一列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同编号',  
                    name: 'contractId',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第二列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同名称',  
                    name: 'contractId1',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第三列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同',  
                    name: 'contractId2',  
                    width:100  
                    }]  
            }]},//第一行结束  
            {//第一行  
            layout:"column",  
            items:[{  
                columnWidth:.3,//第一列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同编号',  
                    name: 'contractId',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第二列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同名称',  
                    name: 'contractId1',  
                    width:100  
                    }]  
            },{  
                columnWidth:.3,//第三列  
                layout:"form",  
                items:[{  
                    xtype:"textfield",  
                    fieldLabel: '合同',  
                    name: 'contractId2',  
                    width:100  
                    }]  
            }]}//第一行结束  
           ]  
      });   
 
 
 
var win =  new  Ext.Window(  
               {  
                id:"window",  
                title: " 合同信息 " ,  
                layout: 'border',  
                width:600,  
                height:500,  
                closeAction:'hide',  
                plain: true,  
                  
                items:[new Ext.TabPanel({  
                        region: 'center',  
                        deferredRender: false,  
//                      layoutOnTabChange:true,//在TabPanel中采用column布局时，有时需要设置该属性  
                        activeTab: 0, //活动的tab索引  
                        items: [{  
                            //contentEl: 'tab1',  
                            title: '合同明细',  
                            closable: false, //关闭项  
                            autoScroll: false, //是否自动显示滚动条  
                            layout:'fit',  
                            collapsible: true,  
                            split:true,  
                            margins:'0 0 0 0',  
                            items:[detailForm]  
                        },{  
                            //contentEl: 'tab2',  
                            title: '规格明细',  
                            closable: false, //关闭项  
                            autoScroll: false, //是否自动显示滚动条  
                            layout:'fit',  
                            collapsible: true,  
                            split:true,  
                            margins:'0 0 0 0' 
                        }]  
                    })],  
                  
                buttons: [{  
                    text:'Submit',  
                    disabled:true 
                },{  
                    text: 'Close',  
                    handler: function(){  
                        win.hide();  
                       // detailForm.destroy();  
                    }  
                }]  
 
      });      
     
    //显示窗口  
    win.show();  
 
}); 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/weoln/archive/2009/07/11/4339533.aspx