Я строю древовидную панель, и когда я нажимаю значок +
чтобы развернуть узлы или -
чтобы свернуть узлы, дерево ведет себя очень странно, я имею в виду следующее:
события select
и itemdblclick
работают должным образом.
Также я прикрепил эти события:
beforeitemexpand: function(item, eOpts) {
console.log('AAAA');
return false;
},
beforeitemcollapse: function(item, eOpts) {
console.log('BBBB');
return false;
},
beforeexpand: function(panel, animate, eOPts) {
console.log('CCCC');
return false;
},
beforecollapse: function(panel, animate, eOPts) {
console.log('DDDD');
return false;
}
ни один из них не работает.
Вот мой код вида панели дерева:
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: Ƈ', name: 'One', text: 'Item one', leaf: false, idparent: null},
{id: ƈ', name: 'Two', text: 'Item two', leaf: false, idparent: null},
{id: Ɖ', name: 'Three', text: 'Item three', leaf: true, idparent: null}
]
тогда, если я выберу первый пункт, остальные API вернут что-то вроде этого:
[
{id: Ɗ', name: 'Child 1-1', text: 'Child 1 of 1', leaf: false: idparent: Ƈ'},
{id: Ƌ', name: 'Child 2-1', text: 'Child 2 of 1', leaf: true: idparent: Ƈ'}
]
и так далее...
Есть ли какое-либо свойство, которое я пропускаю, или какая-либо конфигурация, которую мне нужно добавить, чтобы избежать этого странного поведения?
Всего 1 ответ
Вам необходимо переопределить метод onBeforeExpand
в вашем Ext.tree.View
в Ext.tree.Panel
.
Вы можете сделать это как:
viewConfig: {
onBeforeExpand: function (n) {
if (n.childNodes.length === 0) {
//HERE YOU MUST DO REQUEST AND IN CALLBACK:
n.appendChild(twoItemNodes);
n.expand();
return false;
}
}
}
Посмотрите пример на скрипке: https://fiddle.sencha.com/#view/editor&fiddle/2sbc