Extjs动态改变window的内容和fbar

来源：互联网发布：成都手机数据恢复编辑：程序博客网时间：2024/06/04 18:00

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

}

/**
* 判断字符串长度，如果大于num则后面的用省略号表示
*/
App.replaceStr=function(str,num){
//如果字符串长度没有超过指定长度，则不截串

if(str.length<=num){

return str;

}else{

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

}

return str;

}

在实现过程中，遇到过一个问题，就是传递到html中的内容是<div align=&quot;center&quot;>这种格式的，放入html中后，ext自动编译成了<div>这种格式，但是这不是我想要的结果，我想要的是html自动将<div>样式识别后的样式。最后在将 <div align=&quot;center&quot;>这种格式的字符串传递给html前，先用Ext.util.Format.htmlDecode(content)对内容进行转码，转换成<div>这种样式后，再将转后的字符串传递给html，html就能识别<div>,并能正确的显示样式了

0 0