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>