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

12年前

原文地址:http://blog.csdn.net/weoln/article/details/4339533 
第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题,导致这些问题的常见原因如下:

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

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

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

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


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();


});