Extjs動态改變window的内容和fbar

Extjs動态改變window的内容和fbar，實作類似翻頁的導航。

今天做項目時，經理要求我實作win上的翻頁功能，通過标題進行上一頁和下一頁的導航功能，查閱了相關資料後，實作了如下的效果，當标題超過20個字元時，進行截取，并加上省略号。

動态改變win内容的思路：先通過win擷取到存放内容的panel，然後将panel中調用panel的removeAll()方法，将panel中所有内容移除掉(如果不remove的話，點選下一條的内容會追加到本頁内容的下面),然後将新的内容追加到panel中。

擷取到win的核心代碼如下：

var content = App.AnnouncementLoginHTMLWin(win.result[0].content);//擷取panel中應該放入的最新内容

var panel = win.find('itemId','contentItemId')[0];

panel.removeAll();

panel.add({

xtype:'label',

html: content

});

win.doLayout();

動态改變fbar内容的思路：先通過win擷取到toolbar,然後再擷取到button,通過調用button的setText()方法，動态的改變按鈕的text内容。核心代碼如下：

var toolbar = win.getFooterToolbar();

var preBut = toolbar.findByType('button')[0];

//動态改變上一頁的值

if(preText == ""){

preBut.setText("<font size=2>上一條：</font><font color='red'>沒有記錄了</font>");

}else{

preText = App.replaceStr(preText,win.strLen);

preBut.setText("<font size=2>上一條：</font><font color='blue'>"+preText+"</font>");

}

//動态改變下一條的值

var nextBut = toolbar.findByType('button')[1];

if(nextText == ""){

nextBut.setText("<font size=2>下一條：</font><font color='red'>沒有記錄了</font>");

}else{

nextText = App.replaceStr(nextText,win.strLen);

nextBut.setText("<font size=2>下一條：</font><font color='blue'>"+nextText+"</font>");

}

App.replaceStr=function(str,num){

//如果字元串長度沒有超過指定長度，則不截串

if(str.length<=num){

return str;

}else{

str = str.substring(0,num)+"...";

}

return str;

}

在實作過程中，遇到過一個問題，就是傳遞到html中的内容是 &lt;div align=&amp;quot;center&amp;quot;&gt; 這種格式的，放入html中後，ext自動編譯成了<div>這種格式，但是這不是我想要的結果，我想要的是html自動将<div>樣式識别後的樣式。最後在将 &lt;div align=&amp;quot;center&amp;quot;&gt; 這種格式的字元串傳遞給html前，先用Ext.util.Format.htmlDecode(content) 對内容進行轉碼，轉換成<div>這種樣式後，再将轉後的字元串傳遞給html，html就能識别<div>,并能正确的顯示樣式了