PDA

View Full Version : [SOLVED] Problem with TreeEditor



Fallen Zen
17 Nov 2010, 6:28 AM
I'm having problems with getting treeEditor to work. In my window (which code is attached below), I have 3 buttons on tbar: Add category, Edit category, Remove category. When I click add category, it is created but editor does not launch, edit button doesn't work at all.

I'm getting this error:
this.tree.getTreeEl is not a function
var td = this.tree.getTreeEl().dom, nd = el.dom;
ext-all-debug.js (line 36406)
ExtJS 3.3.0



Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
title: 'Zarz?dzaj kategoriami',
layout: 'fit',
modal: true,
resizable: false,
autoScroll: true,
tbar: [
{
xtype: 'button',
text: 'Nowa kategoria',
handler: function() {
var node = Ext.getCmp('texturesCategoryTree').root.appendChild(new Ext.tree.TreeNode({
text: 'Nowa kategoria'
}));
Ext.getCmp('texturesCategoryTree').getSelectionModel().select(node);
setTimeout(function() {
Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
}, 10);
}
},
{
xtype: 'button',
text: 'Edytuj kategori?',
handler: function() {
var node = Ext.getCmp('texturesCategoryTree').getSelectionModel().getSelectedNode();
Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
}
},
{
xtype: 'button',
text: 'Usu? kategori?',
handler: function() {
var comp = Ext.getCmp('texturesCategoryTree');
var node = comp.getSelectionModel().getSelectedNode();
if (node) {
node.destroy();
}
}
}
],
initComponent: function() {
Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);
var formPanel = new Ext.FormPanel({
labelWidth: 150,
frame: false,
layout: 'form',
bodyStyle: 'padding:5px 5px 5px 5px',
width: 400,
height: 300,
autoScroll: true,
defaults: { width: 200 },
defaultType: 'textfield',
defaults: { anchor: '0' },
border: false,
record: null,
items: [
{
xtype: 'treepanel',
id: 'texturesCategoryTree',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
rootVisible: false,
dataUrl: '../../Textures/GetTexturesCategoriesTree',
root: {
nodeType: 'async',
text: '',
draggable: false
},
treeEditor: new Ext.tree.TreeEditor(this)
}
],
buttons: [{
text: 'Zapisz',
formBind: true,
scope: this,
handler: this.submit
}, {
text: 'Anuluj',
scope: this,
handler: this.close
}]
});
this.add(formPanel);
},
submit: function() {
this.getForm().submit({
url: '../../Textures/AddCategory',
waitTitle: 'Prosz? czekaj...',
waitMsg: 'Twoje zmiany s? zapisywane...',
success: function() {
this.close
}
});
},
getForm: function() {
return this.items.items[0].getForm();
}
});

Fallen Zen
19 Nov 2010, 3:55 AM
Any thoughts?

Screamy
19 Nov 2010, 6:56 AM
The creation/initialization of the 'tbar' has to be moved inside of initComponent().

Fallen Zen
19 Nov 2010, 7:02 AM
Made this change and still same thing:



Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
title: 'Zarz?dzaj kategoriami',
layout: 'fit',
modal: true,
resizable: false,
autoScroll: true,
initComponent: function() {
Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);
var formPanel = new Ext.FormPanel({
labelWidth: 150,
frame: false,
layout: 'form',
bodyStyle: 'padding:5px 5px 5px 5px',
width: 400,
height: 300,
autoScroll: true,
defaults: { width: 200 },
defaultType: 'textfield',
defaults: { anchor: '0' },
border: false,
record: null,
tbar: [
{
xtype: 'button',
text: 'Nowa kategoria',
handler: function() {
var node = Ext.getCmp('texturesCategoryTree').root.appendChild(new Ext.tree.TreeNode({
text: 'Nowa kategoria'
}));
Ext.getCmp('texturesCategoryTree').getSelectionModel().select(node);
setTimeout(function() {
Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
}, 10);
}
},
{
xtype: 'button',
text: 'Edytuj kategori?',
handler: function() {
var node = Ext.getCmp('texturesCategoryTree').getSelectionModel().getSelectedNode();
Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
}
},
{
xtype: 'button',
text: 'Usu? kategori?',
handler: function() {
var comp = Ext.getCmp('texturesCategoryTree');
var node = comp.getSelectionModel().getSelectedNode();
if (node) {
node.destroy();
}
}
}
],
items: [
{
xtype: 'treepanel',
id: 'texturesCategoryTree',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
rootVisible: false,
loader: new Ext.tree.TreeLoader({
url: '../../Textures/GetTexturesCategoriesTree'
}),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
id: '0',
text: ''
}),
treeEditor: new Ext.tree.TreeEditor(this)
}
],
buttons: [{
text: 'Zapisz',
formBind: true,
scope: this,
handler: this.submit
}, {
text: 'Anuluj',
scope: this,
handler: this.close
}]
});
this.add(formPanel);
},
submit: function() {
this.getForm().submit({
url: '../../Textures/AddCategory',
waitTitle: 'Prosz? czekaj...',
waitMsg: 'Twoje zmiany s? zapisywane...',
success: function() {
this.close
}
});
},
getForm: function() {
return this.items.items[0].getForm();
}
});

Condor
19 Nov 2010, 9:45 AM
You are creating the TreeEditor wrong (look in the API docs at the parameters for the constructor).

Fallen Zen
23 Nov 2010, 2:25 AM
Thanks Condor, this helped.



Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
title: 'Zarz?dzaj kategoriami',
layout: 'fit',
modal: true,
resizable: false,
autoScroll: true,
initComponent: function() {
Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);

var textureTreePanel = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
rootVisible: false,
loader: new Ext.tree.TreeLoader({
url: '../../Textures/GetTexturesCategoriesTree'
}),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
id: '0',
text: 'Root'
})
});

var textureTreeEditor = new Ext.tree.TreeEditor(textureTreePanel, {}, {
allowBlank: false,
blankText: 'Nazwa jest wymagana',
selectOnFocus: true
});

........