Действия по отмене функциональности стандартного компонента Sencha ExtJS (Ext.tree.Panel & Ext.data.TreeStore в качестве двух примеров)
Предположим, я расширяю стандартный виджет / компонент Sencha ExtJS 4, и я обнаружил множество вещей, которые работают не так, как я хочу, или, возможно, они просто сломаны, и Сенча не удосужился решить проблемы с компонента пока нет. Я просто собираюсь использовать Sencha ExtJS Ext.tree.Panel и Ext.tree.Store в качестве двух примеров компонентов. Каковы основные шаги по переопределению конструктора, конфигов, свойств, методов и событий, чтобы я мог найти и исправить проблемы с этим компонентом без изменения основного файла JS фреймворка ExtJS 4, который я сейчас использую?
Я понимаю, что иногда в фреймворке так много функциональности, что можно где-то пропустить конфигурацию и не понять, что они могут решить проблему с помощью стандартной реализации. И это то, что можно исправить с помощью большего опыта работы с фреймворком. Оставляя это в стороне здесь, что бы эти самые основные шаги?
Предположим, мы начнем с этих двух реализаций и начнем с самых основ.
К сведению: основные функции этих двух компонентов работают без особых усилий с использованием стека на стороне сервера Ext.Direct, и я могу объяснить все проблемы кросс-браузерной совместимости с компонентом Sencha ExtJS Ext.tree.Panel с IE, Mozilla Firefox и Google Chrome, но я бы, наверное, потратил слишком много времени на эти другие вопросы. И я не говорю, что IE сначала должен быть стереотипным, потому что все эти браузеры имеют свои проблемы с компонентом Ext.tree.Panel. Я бы лучше научился ловить рыбу здесь, чтобы я мог ловить свою собственную рыбу. Как только я лучше пойму эти классы, связанные с деревьями, я задам более конкретные вопросы.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore
Пользовательская реализация Ext.data.TreeStore:
Ext.define('MyApp.store.TreeNodes', {
extend: 'Ext.data.TreeStore',
xtype: 'store-tree-nodes',
model : 'MyApp.model.TreeNode',
proxy: {
type: 'direct',
directFn: Tree_Node_CRUD.read,
reader: {
root: 'data'
}
},
nodeParam: 'node',
parentField: 'parentId',
root: {
text: 'root',
id: '0',
expanded: true
},
autoLoad: false,
single: true,
listeners: {
beforeload: function(store, operation, options) {
},
append: function( thisNode, newChildNode, index, eOpts ) {
}
}
});
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel
Пользовательская реализация Ext.tree.Panel:
Ext.define('MyApp.view.MainTree', {
extend: 'Ext.tree.TreePanel',
xtype: 'view-main-tree',
requires: [
'MyApp.store.TreeNodes'
],
initComponent: function()
{
this.store = 'TreeNodes';
this.superclass.initComponent.call(this);
},
animate: false,
title: 'Tree',
rootVisible: true,
collapsible: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Open Node'
}, {
text: 'Create Node'
}, {
text: 'Delete Node'
}, {
text: 'Expand All'
}, {
text: 'Collapse All'
}]
}],
listeners: {
afterrender: function() {
},
itemclick: function(view, node, item, index, e) {
},
afteritemexpand: function() { //node, index, item, eOpts) {
},
afteritemcollapse: function() { //node, index, item, eOpts) {
}
}
});