PDA

View Full Version : TreePanel Context Menu defined in different class



jpcook01
1 Sep 2011, 3:10 AM
Hi,

I have the following tree panel with a context menu:



/*
* A tree panel representing the navigation hierachy
* @author cookj02
*/
Ext.define('NavBuilder.SitemapList', {
extend: 'Ext.tree.Panel',
alias: 'widget.sitemaplist',

//rootVisible: false,

initComponent: function(){
Ext.apply(this, {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'

},
listeners: {
drop: function (node, data, overModel, dropPosition, options ) {
var treePanel = this.ownerCt;
treePanel.down('#saveButton').setDisabled(false);
}
}
},
store: Ext.create('Ext.data.TreeStore', {
model: 'NavBuilder.NavigationNode',
root: {
expanded: true,
text: 'SiteName',
id: 'rootNode'
},
proxy: {
type: 'ajax',
url: 'sitemap'
}
}),
dockedItems: [{
itemId: 'toolbar',
xtype: 'toolbar',
items: [{
itemId: 'expandAll',
text: 'Expand All',
handler: this.onExpand
}, {
xtype: 'tbseparator'
}, {
itemId: 'collapseAll',
text: 'Collapse All',
handler: this.onCollapse
}, {
xtype: 'tbseparator'
}, {
itemId: 'refresh',
text: 'Refresh',
handler: this.onRefresh
}, {
xtype: 'tbseparator'
}, {
itemId: 'saveButton',
text: 'Save',
disabled: true,
handler: this.onSave
}
]
}],
listeners: {
itemcontextmenu: function(view, rec, node, index, e) {
e.stopEvent();
menu.showAt(e.getXY());
return false;
}
}
});
this.callParent();
this.getSelectionModel().on({
scope: this,
select: this.onSelect
});

//TODO pull in menu from external js file - gives an error.
//TODO move items into Actions?
//var menu = Ext.create('NavBuilder.ContextMenu');
var tree = this;
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
items: [{
text: 'Add Item',
handler: function() {

selectedItem = tree.getSelectionModel().getSelection();
var record = selectedItem[0];

if(record.isLeaf()){
var parent = record.parentNode;
var container = Ext.create('NavBuilder.NavigationNode', {
id: record.getId(),
text : record.get('text'),
url : record.get('url'),
containerType : record.get('containerType'),
isFrontPage : record.get('isFrontPage'),
isCrumb : record.get('isCrumb'),
activateWhenSiblingsActive : record.get('activateWhenSiblingsActive'),
activateDescendantsWhenActive : record.get('activateDescendantsWhenActive'),
alwaysActive : record.get('alwaysActive'),
hideChildren : record.get('hideChildren')
});

parent.insertBefore(container, record);
container.appendChild({
id: guidGenerator(),
text: 'New node',
leaf: true
});
record.remove();
container.expand();
} else {
record.insertChild(0,{
id: guidGenerator(),
text: 'New node',
leaf: true
});
}
tree.down('#saveButton').setDisabled(false);
}
},{
xtype: 'menuseparator'
},{
text: 'Delete node',
handler: function() {
selectedItem = tree.getSelectionModel().getSelection();
selectedItem[0].remove();
tree.down('#saveButton').setDisabled(false);
}
}
]
});
},

onRefresh: function() {
this.up('#sitemaplist').getStore().load();
this.up('#sitemaplist').down('#saveButton').setDisabled(true);
},

onExpand: function() {
this.up('#sitemaplist').expandAll();
},

onCollapse: function() {
this.up('#sitemaplist').collapseAll();
},

onSelect: function(selModel, rec){
var formPanel = this.ownerCt.down('#sitemapform');
var treePanel = this.ownerCt.down('#sitemaplist');
processFormChange(formPanel, treePanel);
this.ownerCt.loadForm(rec);
},

onSave: function() {
saveNodeList(this.up('#sitemaplist'), this);
}
});


Ideally I would like to define the menu in another class as per the commented out line:


//var menu = Ext.create('NavBuilder.ContextMenu');


But when I move the menu code into a separate class and then try to invoke the context menu I get an error saying: el is undefined

Is there a way to easily define the menu item in a separate class?

Thanks
Jon

skirtle
1 Sep 2011, 3:47 PM
Could you post the code you used to define the class that isn't working? I'd guess there's a simple mistake but it's hard to say without seeing it.

On a separate note, you're missing var on your selectedItem declarations.

jpcook01
2 Sep 2011, 2:52 AM
Simple menu defined in separate class:



Ext.define('NavBuilder.ContextMenu', {
extend: 'Ext.menu.Menu',
alias: 'widget.contextmenu',

initComponent: function(){
Ext.apply(this, {
width: 100,
height: 100,
plain: true,
items: [{
text: 'Add Child'
},{
text: 'Add Leaf'
}]
});
}
});

skirtle
2 Sep 2011, 6:27 AM
You're missing this.callParent().