您的位置：首页 > Web前端 > JavaScript

ExtJs4中的复选树级联选择

2015-11-09 00:00 816 查看
好久没有写新的博文了，过了个年休息了近一个月，人都懒散了。。
这几天要把项目中的几个模块有ext3升级到ext4，还要保持页面展示和功能要跟3.x版本的一样。升级并不是一件简单的是，基本相当于重写了，3.x版本的复选框树级联操作是在网上找的一个现成的插件，直接搬运到4.2中就不能用了，但是又找不到可用的插件。百度谷歌了好久，还真让我搞出来一个方法，记录下来吧，也分享给大家。如有不合理或者更好的方法希望不吝赐教。

在3.x版本中要实现级联选择的话，我使用的是一个
TreeCheckNodeUI.js
这个文件百度一下都能找到啊，就不详细说明了，很好用。

在4.2中实现的方法是在
treepanel
的配置项
viewConfig
中添加函数
onCheckboxChange
，表示复选框选择状态发生变化是触发的事件，先把代码贴出来：

viewConfig:{
onCheckboxChange: function(e, t) {
var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record]{
header : "姓名",
width : 100,
dataIndex : "name",
menuDisabled : true,
sortable : false,
renderer : function(value, metadata, record, rowIndex,
columnIndex, store) {
value = value.replace(/</g, '<');
metadata.tdAttr = 'data-qtip="' + value+ '"';
return value;
}
}

给colmodel中的列添加一个renderer[/code]函数，给单元格所在的
td
添加一个
qtip
，将单元格的内容放到里面就可以了。

extjs的qtip提示会有个小问题，也不知道是不是bug，如果value的值中包含了空格，横线等特殊符号的时候qtip显示的内容不完整，只能显示第一个空格之前的内容。为了避免这种情况可以用<xmp>标签将value包含起来： 
metadata.tdAttr = 'data-qtip="<xmp
7fe0
>' + value+ '</xmp>"';


还有一种办法就是给grid添加一个鼠标移动事件，当鼠标移动到单元格内的时候取到单元格的内容，然后生成一个tooltip显示出来。代码如下：

listeners:{ 'render': function(g) { g.on("itemmouseenter", function(view,record,mode,index,e) { var view = g.getView(); logGrid.tip = Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: view.getCellSelector(), trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { tip.update(tip.triggerElement.innerHTML); } } }); }); }
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航