Я строю древовидную панель, и когда я щелкаю значок +, чтобы развернуть узлы, или -, чтобы свернуть узлы, дерево ведет себя очень странно, я имею в виду следующее:
события select и itemdblclick работают в соответствии с ожиданиями.
Также я прикрепил эти события:
beforeitemexpand: function(item, eOpts) {
...
},
beforeitemcollapse: function(item, eOpts) {
...
},
beforeexpand: function(panel, animate, eOPts) {
...
},
beforecollapse: function(panel, animate, eOPts) {
...
}
ни один из них не работает.
Вот мой код вида панели дерева:
Ext.define('mycomponent.mytreepanelview', {
extend: 'Ext.window.Window',
itemId: 'mytreewindow',
id: 'mytreewindow',
xtype: 'mytreewindow',
modal: true,
bodyPadding: 10,
height: 450,
width: 375,
closeAction: 'destroy',
resizable: false,
items: [
{
xtype: 'label',
text: '?????'
},
{
id: 'mytree',
xtype: 'treepanel',
border: true,
width: 345,
height: 325,
title: '',
rootVisible: false,
header: false,
displayField: 'text',
store: Ext.create('mycomponent.store', {}),
viewConfig: {
preserveScrollOnRefresh: true,
toggleOnDblClick: false
}
},
{
xtype: 'label',
text: '??????'
}
],
buttons: [
{
itemId: 'okButton',
id: 'okButton',
text: 'Ok'
},
{
itemId: 'cancelButton',
id: 'cancelButton',
text: 'Cancel'
}
],
initComponent: function () {
this.callParent(arguments);
dtzerp.getController('mycomponent.mycontroller');
},
constructor: function (config) {
this.callParent(arguments);
this.initConfig(config);
return this;
}
});
Также, вот мой магазин:
Ext.define('mycomponent.mystore', {
extend: 'Ext.data.TreeStore',
alias: 'store.mystore',
storeId: 'mystore',
model: Ext.create('mycomponent.mymodel'),
restful: true,
autoLoad: false,
root: {
text: 'Loading...',
id: 'NULL',
expanded: true,
loaded: true
},
proxy: {
type: 'ajax',
headers: {
'Accept': '*/*',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Authorization': localStorage.token
},
extraParams: {
sort: 'name',
'filter[active]': true,
'filter[idparent][null]': 0
},
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
},
api: {
read: 'http://myurl',
create: 'http://myurl',
update: 'http://myurl',
destroy: 'http://myurl'
}
},
constructor: function (config) {
config = Ext.apply({
rootProperty: Ext.clone(this.rootData)
}, config);
this.callParent([config]);
}
});
Более того, данные, поступившие из остальных API, всегда представляют собой массив с данными в выбранном узле, то есть только дочерние элементы выбранного узла, если он есть.
При первом вызове остальные API вернут что-то вроде этого:
[
{id: '1', name: 'One', text: 'Item one', leaf: false, idparent: null},
{id: '2', name: 'Two', text: 'Item two', leaf: false, idparent: null},
{id: '3', name: 'Three', text: 'Item three', leaf: true, idparent: null}
]
тогда, если я выберу первый элемент, остальные API вернут что-то вроде этого:
[
{id: '4', name: 'Child 1-1', text: 'Child 1 of 1', leaf: false: idparent: '1'},
{id: '5', name: 'Child 2-1', text: 'Child 2 of 1', leaf: true: idparent: '1'}
]
и так далее ...
UPDATE
Я приказываю магазину (Ext.data.TreeStore) загрузить событие show окна, содержащего древовидную панель. Это в контроллере:
init: function () {
this.control({
'#mytreewindow': {
show: function (item, eOPts) {
var store = Ext.getStore('mytreestore');
var children = [];
var that = this;
store.load({
callback: function (records) {
debugger;
console.log(records);
var children = [
{text: 'testing',
leaf: false,
idparent: null,
idelement: 1,
children: [{idparent: 1,
text: 'testing child',
idelement: 2,
leaf: true,
children: []
}
];
store.loadData(children, false);
}
хранилище входит в обратный вызов, но когда debugger останавливает выполнение, дерево заполняется данными из rest-api, прямо перед выполнением обратного вызова. Таким образом, после store.loadData(... дерево обновляется с новой информацией, но, когда щелкает узел + в узле testing, оно возвращается к тому же, что и на изображении.
Есть ли какое-либо свойство, которое мне не хватает, или какая-либо конфигурация, которую мне нужно добавить, чтобы избежать этого странного поведения?