extJS3.4 tabPanel刷新问题 成功20QB送上

Question

Ext.onReady(function() {
……
var ds_tab1 = new Ext.data.GroupingStore({
sortInfo:{field: 'oltip', direction: "ASC"},
storeId: 'myStore',
//autoDestrosy:true,
proxy : new Ext.data.HttpProxy({
url : 'res.do?method=tabOne'
}),
reader : new Ext.data.JsonReader({
root:'rows1'
},[
    {name: "ponport1"},
    {name: "onuid1"},
    {name: "onuname1"},
    {name: "onuip1"},
    {name: "outype1"},
    {name: "oltip"},
    {name: "manu"},
    {name: "model"},
            {name: "mac"},
            {name: "ponport2"},
            {name: "onuid2"},
            {name: "onuname2"},
            {name: "onuip2"},
            {name: "onuid2"},
            {name: "outype2"},
            {name: "flag"}]),
            groupField: "flag"
});
var ds_tab2 = new Ext.data.GroupingStore({
sortInfo:{field: 'oltip', direction: "ASC"},
    proxy : new Ext.data.HttpProxy({
     url : 'res.do?method=tabTwo'
}),
reader : new Ext.data.JsonReader({
root:'rows2'
},[
    {name: "mac1"},
    {name: "onuip1"},
    {name: "outype1"},
    {name: "oltip"},
    {name: "oltname"},
    {name: "manu"},
    {name: "model"},
    {name: "ponport"},
    {name: "onuid"},
    {name: "mac2"},
    {name: "onuip2"},
    {name: "outype2"},
            {name: "flag"}
]),
groupField: "flag"
});
})extjsfunction

Answer 1

var cm_tab1 = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),
{header:"标记",dataIndex:'flag',width:200},
{header:"MAC地址", dataIndex:'mac',css:'background-color:A0B5FF;',width:200},
{header:"厂家", dataIndex:'manu',css:'background-color:A0B5FF;',width:200},
{header:"OLT型号", dataIndex:'model',css:'background-color:A0B5FF;',width:200},
{header:"OLT IP地址", dataIndex:'oltip',css:'background-color:A0B5FF;',width:200},
{header:"授权号",  dataIndex:'onuid1',width:200},
{header:"*授权号", dataIndex:'onuid2',width:200},
{header:"ONUIP地址",  dataIndex:'onuip1',width:200},
{header:"*ONUIP地址", dataIndex:'onuip2',width:200},
{header:"ONU名称", dataIndex:'onuname1',width:200},
{header:"*ONU名称", dataIndex:'onuname2',width:200},
{header:"ONU类型", dataIndex:'outype1',width:200},
{header:"*ONU类型", dataIndex:'outype2',width:200},
{header:"PON口", dataIndex:'ponport1',width:200},
{header:"PON口", dataIndex:'ponport2',width:200},
],
defaults: {
sortable: true
}
});var cm_tab2 = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),
{header:"MAC地址", dataIndex:"mac1"},
{header:"ONUIP地址",  dataIndex:"onuip1"},
{header:"ONU类型", dataIndex:"outype1"},
{header:"OLT IP地址", dataIndex:"oltip",css:'background-color:A0B5FF;'},
{header:"OLT名称", dataIndex:"oltname",css:'background-color:A0B5FF;',width:140},
{header:"厂家", dataIndex:"manu",css:'background-color:A0B5FF;'},
{header:"OLT型号", dataIndex:"model",css:'background-color:A0B5FF;'},
{header:"PON口", dataIndex:"ponport",css:'background-color:A0B5FF;'},
{header:"授权号", dataIndex:"onuid",css:'background-color:A0B5FF;'},
{header:"*MAC地址", dataIndex:"mac2"},
{header:"*ONUIP地址", dataIndex:"onuip2"},
{header:"*ONU类型", dataIndex:"outype2"},
{header:"标记", dataIndex:"flag"}
],
defaults: {
sortable: true

}
});

Answer 2

var view = new Ext.grid.GroupingView({
 //forceFit: true,
 /*sortAscText : "正序",
 sortDescText: "倒序",
 columnsText : "列显示/隐藏",
 enableGroupingMenu : false,*/ 
 groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "flag" : "flag"]})'
});
var grid_tab1 = new Ext.grid.GridPanel({
id:"tab1",
title:"PON EMS数据不合理",
store : ds_tab1,
colModel: cm_tab1,
frame:true,
collapsible: true,
    animCollapse: false,
height:1200,
stripeRows: true,
loadMask: {msg: "正在加载数据，请稍侯..."},
view:view
});
var grid_tab2 = new Ext.grid.GridPanel({
title:"资源数据不合理",
//renderTo: Ext.getBody(),  
height  : 400,
width:1024,
collapsible: true,
    animCollapse: false,
store : ds_tab2,
colModel: cm_tab2,
border  : false, // 去掉2px的内边框
columnLines: true,
stripeRows: true,
loadMask: {msg: "正在加载数据，请稍侯..."},
view:view
});

Answer 3

function dtlRes(oltIp){
//定义数据库借口的url
ds_tab1.removeAll(true);
ds_tab1.load({
        params : { 
oltIp :oltIp
        } 
    });
ds_tab2.removeAll(true);
ds_tab2.load({
        params : { 
oltIp :oltIp
        } 
    });
ds_tab3.removeAll();
ds_tab3.load({  
        params : { 
oltIp :oltIp
        } 
    });
ds_tab4.removeAll();
ds_tab4.load({  
        params : { 
oltIp :oltIp
        } 
    });
ds_tab5.removeAll();
ds_tab5.load({  
        params : { 
oltIp :oltIp
        } 
    });
//定义新的tab



var win1 = Ext.getCmp("winDtlRes");
if (!win1) {
var toolbar = new Ext.Toolbar({
items : [{
     text : "下载", 
     cls  : "x-btn-text-icon", 
     icon : "images/extjs/save.gif", 
     handler : function(){
var rows = Ext.getCmp("gridQryRes").selModel.selections.items;
var oltIp =rows[0].get("oltIp");
expTabRes(oltIp);

    }}
     ]
});
var  firstActive=true;
var win1 = new Ext.Window({
id    : "winDtlRes",
title  : "资源比对详情",
iconCls: "icon-win",
constrain  : true, // win只能在视图中显示
closeAction:'hide',
width:1024,
height:500,
frame:true,
stripeRows: true,
labelAlign : "right",
tbar  : toolbar,
items : new Ext.TabPanel({
id:'tabpanel',
　　　　　　　　　　　activeTab:0,//当前标签为第1个tab（从0开始索引）
　　　　　　　　　　　border:false,
　　　　　　　　　　　items:[
                   grid_tab1,
                   grid_tab2,
                   grid_tab3,
                   //grid_tab4,
                   grid_tab5]
　　　　　　　　}
),
　　　　　plain:false

});

}
win1.show();
}

Answer 4

代码好多,好混乱,
动态更新组件后需调用doLayout方法刷新视图
ds_tab5.doLayout();