tab标签页关闭按钮的动态显隐

  • 内容
  • 评论
  • 相关

看到有些人发的日报格式,我勒个去,和以前发周报差不多呀!

我已经受够了周报了——要写三件主要工作,每一项工作要包括描述、进展、遇到的问题和解决方案。然后还要有图表的数据支持,团队的评价,个人总结和下周工作安排。

每周要花整整半天的时间来完成这个汇报,想起来就头疼。

鉴于目前还不需要给很多领导看,我就随意了o( ̄▽ ̄)ゞ

今天主要工作有:

1、完成FOSS20141106日常版本中限制少货找到差异重复上报需求的走读、对比、单元测试交付物。

2、完成POP项目新增价格方案详情前台代码。

3、办理异动。

今天的收获:

今天遇到一个问题,因为价格方案要求根据不同的重量体积临界值分段配置,于是我就用一个tabPanel把临界值和价格这些重复出现的数据分段填写展示,并且允许用户新增删除tab。

那么问题来了,只填写一个临界值的情况下,分段就必须按照顺序排列,那么我就不能允许用户任意删除tab,只能够让她从最后一个往前删除。

最简单的实现方法呢,就是通过按钮来删除,想怎么控制怎么控制。

但是我不想用按钮来做删除,麻烦,而且用户体验不好,我在标签上通过closable属性添加了删除按钮。

我要达到的效果是只有最后一个标签上有叉,其他的标签没有。

那么问题又来了,挖掘机。。咳咳><

问题在于如何动态的控制这个按钮。首先尝试了closable=false,失败了,根本无法重新渲染,doLayout也好,hide然后show也好,叉叉一直都在。

咨询了杨伟,他也没有做过,给出了一个解决方案不太靠谱,叉叉留着,监听beforeclose事件中进行判断,我不太满意。

后来我从hide()show()中得到启发,可以把tab中的数据保存起来,然后销毁她,重新创建一个新的标签。

尝试一下,果然可行。

相对应的,新增按钮时候,我要移除当前tab关闭按钮,创建一个新的可关闭tab;关闭tab时还要把上一个tab的关闭按钮加上。

(补充:关闭之后加上按钮方法可以放在form的监听事件中,通过up()找到tab)

于是封装方法如下:

[code lang="javascript"]
/**
* 设置分段标签关闭属性
* @param tab 选项卡
* @param index 对应标签角标
* @param closable 设置是否可关闭
* @returns tab 选项卡
* @author 148246-孙建博
*/
pricing.setTabClosable = function(tab,index,closable){
//缓存当前form的值
var oldFormValues = tab.items.get(index).getValues();
//缓存分段数
var section = index+1;
//重新渲染
tab.remove(index);
var newTabForm = Ext.create('Foss.pricing.pricePlan.PricePlanDetialSectionForm',{
title : '第'+section+'段',
//取消前一标签页关闭功能
closable : closable,
sectionID : section
});
newTabForm.getForm().setValues(oldFormValues);
tab.add(newTabForm);
return tab;
}
[/code]

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注