Я получаю JSON из запроса AJAX, который не соответствует структуре, созданной TreeStore. Поэтому я загружаю хранилище с необработанными данными, а затем добавляю данные в TreeStore. Именно так:
onLoad: function(p1, p2, p3, p4) {
var store = Ext.getStore('areasCentersTreeId');
if (store) {
var modifiedStore = parseServerTree(p2[0].data);
debugger;
function parseServerTree(data) {
var nodes = Object.keys(data);
var treeStoreData = []
// Cogemos uno a uno y creamos la raiz
nodes.forEach(rootNodeName => {
if (rootNodeName != 'id') {
var rootNode = {
id: rootNodeName,
text: rootNodeName,
expanded: true,
checked: false,
children: []
}
const childrens = data[rootNodeName];
//text, leaf, check, id, name, channel, type
childrens.forEach(rootNodeChild => {
rootNode.children.push({
text: rootNodeChild.name,
leaf: true,
checked: false,
id: rootNodeChild.id,
channel: rootNodeChild.channel,
type: rootNodeChild.type
})
})
treeStoreData.push(rootNode);
}
})
return {children: treeStoreData};
}
store.removeAll();
store.add(modifiedStore);
}
}
Это магазины, которые я использую:
areasCentersRaw: {
parentIdProperty: 'children',
storeId: 'areasCentersRawId',
proxy: {
type: 'ajax',
url: [REDACTED]
reader: {
type: 'json',
}
},
autoLoad: true,
listeners: {
load: 'onLoad'
}
},
areasCentersTree: {
type: 'tree',
storeId: 'areasCentersTreeId',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'children'
}
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}],
autoLoad: true
}
Вид:
Ext.define('jsclient.view.assignCapacity.AssignCapacityAreasCentersTreeV', {
extend: 'Ext.tree.Panel',
alias: 'widget.assignCapacityAreasCentersTree',
itemId: 'assignCapacityAreasCentersTreeView',
requires: [
'jsclient.view.assignCapacity.AssignCapacityVM',
'jsclient.view.assignCapacity.AssignCapacityVC'
],
viewModel: 'assignCapacity',
controller: 'assignCapacity',
width: 300,
height: 500,
checkPropagation: 'both',
scrollable: true,
bind: {
store: '{areasCentersTree}'
},
rootVisible: false,
useArrows: true,
frame: false,
hideHeaders: true,
bufferedRenderer: false,
queryMode: 'local',
dataIndex: 'text',
scope: this,
animate: true,
})
Это вызывает некоторые проблемы в представлении компонентов: я не могу расширять или свертывать узлы, я не могу скрыть корневой узел (даже если я использую rootVisible: false
)...
Любая помощь?
Вместо использования store.add()
вам нужно использовать store.setRoot()
treestore
.
Если вы хотите напрямую добавить в treepanel
без использования магазина, вы можете использовать treepanel.setRootNode()
.
В этой вышеприведенной скрипте я создал демонстрацию с использованием treepanel
и я использовал динамические данные, используя запрос ajax от json. Надеюсь, это поможет/поможет вам достичь вашего требования.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.TreeStore', {
storeId: 'treestore'
});
Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'Demo Tree',
store: 'treestore',
rootVisible: false,
tbar: ['->', {
text: 'Load Data',
handler: function (btn) {
var store = btn.up('treepanel').getStore();
Ext.Ajax.request({
url: 'data1.json',
success: function (res) {
res = Ext.decode(res.responseText);
let data = res.data.map(o => {
return {
text: o.orgName,
expanded: true,
children: o.dept.map(v => {
return {
text: v.deptName,
leaf: true
}
})
}
});
store.setRoot({
expanded: true, //Need to be set true otherwise it will not shwo if root is hide
children: data
});
}
})
}
}]
});
}
});