Ext学习之——活用Grid表格和TabPanel页切

　　TabPanel和Grid是很常见的两大组件，用它们可以实现很好的页面效果。最近实现了一个如下的效果，记录下来，以备后查，如若能给他人一些启发将深感荣幸。

任务描述：在现有的TabPanel项目界面里面打开一个信息详情页，包含六个小tabPanel，每一个里面包含一个gridPanel。

1.首先我们部件基本的骨架TabPanel，infoDetail.js

//生成TablPanelItems
function creatMainTabItems(){
    var tabItemsNameArray = ["测试信息","测试信息","测试信息","测试信息","测试信息","测试信息"];
    var tabItemsViewPortArray = ["baseInfoPanel1","baseInfoPanel2","baseInfoPanel3","baseInfoPanel4","baseInfoPanel5","baseInfoPanel6"];
    var tabItemsArray = [];
    for (var i = 0; i <tabItemsNameArray.length ; i++){
        tabItemsArray.push({
            defaults:{
                border:false,
                frame:true
            },
            title:tabItemsNameArray[i],
            layout:'fit',
            items:[tabItemsViewPortArray[i]]
        });
    }
    return tabItemsArray;
}

Ext.onReady(function() {
    Ext.QuickTips.init();
    var infoDeatil = new Ext.Panel({
        id: 'infoDeatilTopPanel',
        layout: 'border',
        items: [{
            region: 'center',
            id: 'infoDeatilMainPanel',
            layout: 'fit',
            border:false,
            style: {
                "padding": "5px",
                "padding-bottom": "0px"
            },
            items: [{
                id:'centerTabPanl',
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{
                    "padding": "5px",
                    style:'border:1px solid white;'
                },
                items:[creatMainTabItems()]
            }]
        },
        {
            region: 'south',
            hidden: true,
            html: '<iframe id="baojDownloadFrame" name="baojDownloadFrame" frameborder=0 src="about:blank"></iframe>'
        },
        {
            region:'north',
            xtype: 'panel',
            border: false,
            layout: 'fit',
            listeners : {
                'afterrender' : function(t){
                //    t.add(getSearchToobarFun2());
                }
            }
        }]
    });

    var infoDeatilViewport = new Ext.Viewport({
        id: 'infoDeatilViewport',
        layout: 'fit',
        hideBorders: true,
        defaults: {
        },
        items: [infoDeatil],
        listeners: {
            'afterrender': function() {}
        }
    });
});

2.然后接着写每个Tabpanel项(略掉其他)

var infoPanel = new Ext.Panel({
    id:'InfoPanel',
//    title:'测试信息',
    layout:'fit',
    border : false,
    bodyBorder : false,
    items : [ getPartInfoGrid('InfoGrid',fanId,4,'part-cabin')]
});

var baseInfo1 = new Ext.Panel({
        id:'Panel',        
        layout:'fit',
        items:[infoPanel]
});

3.接着写公共的Grid（略）

4.接着写公共增删改查（略）