JS文件中的代码
// 数据
var treeStore = Ext.create('Ext.data.TreeStore', {
fields: [
'text', 'children', 'leaf', 'conceptId', 'roleURI', 'itemType', 'abstract', 'substitutionGroup', 'numeric','disabled',
{name:'checked',defaultValue: false}
],
proxy: {
type: 'ajax',
url: loadRoleElementUrl
}
});
// 这里加载数据后,遍历数据,如果后台返回来的数据disable设置为true,则添加自定义class,用来设置样式。
treeStore.load({callback:function(){
treeStore.getRootNode().cascadeBy(function(node){
if(node.get('conceptId')){
if(node.get('disabled') == true){
node.set('checked', false);
node.set("cls","custom_tree_class"); // 设置自定义class
}
}
});
}});
//
var treePanel = Ext.create('Ext.tree.Panel', {
store: treeStore,
border: false,
animate: false,
rootVisible: false,
buttonAlign:'center',
viewConfig: {
onCheckboxChange: function (e, t) {
var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;
if (item) {
record = this.getRecord(item);
var check = !record.get('checked');
record.set('checked', check);
if (check) {
record.cascadeBy(function (node) {
//当节点选中时触发,这里判断disabled是否为true,如果为true,则不可选中,并且设置自定义class。
if(node.get('disabled') == true){
node.set("cls","custom_tree_class");
node.set('checked', false);
} else {
node.set('checked', true);
}
});
} else {
record.cascadeBy(function (node) {
node.set('checked', false);
});
}
}
}
}
});
样式代码:
<style type="text/css">
.custom_tree_class {
color: #D4D4D4 !important;
}
</style>