Extjs中ViewPort動態更換Panel

我們在使用extjs進行開發單頁面應用時，我們構建了乙個viewport有時候可能希望對viewport中的items進行動態替換，網上也有很多的資料但是都只說了個大概並沒有詳細說明，這裡我將對遇到這種需求時如何處理進行詳細介紹。

環境

extjs 4.2

首先我們來看viewport

/**
* 選單model
*/ext.define('menu', , , , ]
});ext.onready(function () ).hide();
ext.create('ext.container.viewport', );
});/**
* 構建指標樹
* @returns 
*/function material_zbtree() ,
proxy: 
}),listeners: );
},//單擊節點展開之前的事件
'beforeitemclick': function (view, record, item, index, e) 
}});
}

首先我構建了乙個viewport，這個viewport的west有乙個樹形選單，樹形選單是多級樹形選單，針對沒級的選單需要載入特定的panel，我們來看看兩個panel

var yjxngridstore = ext.create('ext.data.store', ,
extraparams: {},
startparam: 'start',
limitparam: 'limit'
}});function
material_yjxngridpanel
() ,,],
dockeditems: [;
yjxngridstore.reload();}}
}, ;
yjxngridstore.reload();}}
}, ;
yjxngridstore.reload();}}
}, }]
}, ]
});}

推薦所有的panel的構建都通過function來進行，這裡基礎的環境就有了，下面我們就來看看如何動態的切換panel

function
material_loaditems
(j) 
if (j.id == 'secondxingneng') 
if (j.id == 'thirdxingneng') 
var viewport = ext.getcmp('xnzbviewport');
viewport.items.each(function
(item) 
});gridpanel.getstore().reload();
gridpanel.show();
viewport.add(gridpanel);
viewport.dolayout();
}

viewport通過呼叫material_loaditems方法來動態載入panel，並實現動態切換

具體的思路就是

1、獲取到viewport

2、遍歷viewport的items移除當前的panel，記住這裡採用的是viewport.remove(item, false);其中false表示的是只是從viewport移除這個panel但是並沒有銷毀這個panel，同時要注意乙個方法item.hide();就是移除的這個panel需要隱藏，不然會跟新新增的panel重疊導致問題出現（我就是遇到這個問題，花了很長時間才找到這個問題）

3、移除完了panel後再新增自己想要新增的panel，同時需要呼叫viewport的dolayout方法顯示新新增的panel

這樣就完成了viewport的panel的動態切換

Extjs中ViewPort動態更換Panel

ExtJs 中Viewport的介紹與使用

viewport中的屬性

meta中viewport的使用

Extjs中ViewPort動態更換Panel

ExtJs 中Viewport的介紹與使用

viewport中的屬性

meta中viewport的使用

相關推薦