Extjs Tree context menu mixes on second open - extjs

Question

Below, When I close and reopen the window, 'projeler', contextmenu of the tree damages itself. When I reopen the window, only first item damages itself. It seems like there are two labels mixed together. I tried to delete 'generalCreationButtonStatus' but I got same error on first item of the menu.
Could you please help?
Ext.define('MyDesktop.Projeler', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
],
id:'tree-projeler',
init : function(){
this.launcher = {
text: 'Projeler',
iconCls:'projectManage-shortcut'
};
},
createWindow : function(){
var projectCreationWin = new Ext.Window({
layout:'form',
title: 'Proje Oluşturma',
closeAction:'hide',
plain: true,
width: 250,
height: 200,
modal : true,
resizable:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Proje Kodu',
emptyText: 'Proje Kodu Yazınız...',
name:'projectCreationWin_projectCode_name',
id:"projectCreationWin_projectCode_id",
width: 100,
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel: 'Proje Adı',
emptyText: 'Proje Adı Yazınız...',
name:'projectCreationWin_projectName_name',
id:"projectCreationWin_projectName_id",
width: 100,
anchor: '100%'
},
],
buttons: [{
text: 'Oluştur',
handler: function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
var projectCode= Ext.getCmp("projectCreationWin_projectCode_id");
var projectCode= projectCode.getValue();
var projectName= Ext.getCmp("projectCreationWin_projectName_id");
var projectName= projectName.getValue();
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addProject',
'code':projectCode,
'name':projectName,
'node': selectedNode[0].data.id,
'depth': '1'
},
success: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},{
text:'Vazgeç',
handler: function(){
}
}],
listeners:{
beforeshow:function(){
}
}
})
var contractCreationWin = new Ext.Window({
layout:'form',
title: 'Kontrat Oluşturma',
closeAction:'hide',
plain: true,
width: 300,
height: 300,
modal : true,
resizable:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Kontrat Numarası',
emptyText: 'Kontrat Numarası Yazınız...',
name:'contractCreationWin_contractNo_name',
id:"contractCreationWin_contractNo_id",
width: 100,
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel: 'Sas Numarası',
emptyText: 'Sas Numarası Yazınız...',
name:'contractCreationWin_PONo_name',
id:"contractCreationWin_PONo_id",
width: 100,
anchor: '100%'
},
{
xtype: 'radiogroup',
fieldLabel: 'Single Column',
columns: 1,
items: [
{
boxLabel: 'PAC',
name: '222',
inputValue: 1,
id: 'contractCreationWin_RadioPAC_id',
},
{
boxLabel: 'PAT',
name: '222',
inputValue: 2,
id: 'contractCreationWin_RadioPAT_id',
},
]
}
],
buttons: [{
text: 'Oluştur',
handler:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
var contractNo= Ext.getCmp("contractCreationWin_contractNo_id");
var contractNo= contractNo.getValue();
var customerPO= Ext.getCmp("contractCreationWin_PONo_id");
var customerPO= customerPO.getValue();
var ifPAC = Ext.getCmp('contractCreationWin_RadioPAC_id');
var ifPAC= ifPAC.getValue();
if(ifPAC == true){
var contractType = 'PAC';
}else{
var contractType = 'PAT';
}
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addContract',
'code':contractNo,
'name':customerPO,
'parentId': selectedNode[0].data.id,
'depth': '3',
contractType: contractType ,
},
success: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},{
text:'Vazgeç',
handler: function(){
alert(this.getValue(true));
}
}],
listeners:{
beforeshow:function(){
}
}
})
function generalCreationButtonStatus(){
if (projelerTree.getSelectionModel().hasSelection()) {
var selectedNode = projelerTree.getSelectionModel().getSelection();
if(selectedNode[0].data.depth==0){
Ext.getCmp('tree-context-proje-olustur').show();
}else{
Ext.getCmp('tree-context-proje-olustur').hide();
}
if(selectedNode[0].data.depth==1){
Ext.getCmp('tree-context-faz-olustur').show();
}else{
Ext.getCmp('tree-context-faz-olustur').hide();
}
if(selectedNode[0].data.depth==2){
Ext.getCmp('tree-context-kontrat-olustur').show();
}else{
Ext.getCmp('tree-context-kontrat-olustur').hide();
}
if(selectedNode[0].data.depth==3){
Ext.getCmp('tree-context-saha-olustur').show();
}else{
Ext.getCmp('tree-context-saha-olustur').hide();
}
}
}
var projelerTereeRclckMenu = new Ext.menu.Menu({
listeners:{
beforeShow: function(){
projelerTereeRclckMenu
generalCreationButtonStatus();
}
},
items: [
{
text: 'Sil',
id: 'tree-context-sil',
handler : function(){ alert('Sil butonuna tıklandı'); },
},
{
text: 'Proje Oluştur',
id: 'tree-context-proje-olustur',
handler : function(){
projectCreationWin.show();
}
},
{
text: 'Faz Oluştur',
id: 'tree-context-faz-olustur',
handler : function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addPhase',
'parentId': selectedNode[0].data.id,
'depth': '2'
},
success: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},
{
text: 'Kontrat Oluştur',
id: 'tree-context-kontrat-olustur',
handler : function(){
contractCreationWin.show();
},
},
{
text: 'Saha Oluştur',
handler : function(){ alert('Sil butonuna tıklandı'); },
id: 'tree-context-saha-olustur',
}
]
});
var projelerTreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
actionMethods: 'post',
url: 'phps/treeloader.php',
extraParams: {
process:'callNode',
}
},
root: {
text: 'Root Node',
id: '0',
parentid:'0',
expanded: false,
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
var projelerTree = Ext.create('Ext.tree.Panel', {
store: projelerTreeStore,
id:'projelerTree-id',
renderTo: Ext.getBody(),
height: 300,
width: 250,
title: 'PMT Ağaç Yapısı',
tbar : [{
text:'Yenile',
handler: function(){
},
{
text: 'add node',
handler: function() {
if (projelerTree.getSelectionModel().hasSelection()) {
var selectedNode = projelerTree.getSelectionModel().getSelection();
Ext.MessageBox.prompt('Add Node', 'Please enter node text:', function(btn, text){
if (btn == 'ok'){
Ext.Ajax.request({
url: 'phps/treeloader.php',
params: {
nodetext: text,
parentid : selectedNode[0].data.id,
depth: selectedNode[0].data.depth,
process: 'addNode'
},
success: function(response){
var id = response.responseText;
if (id > 0) {
selectedNode[0].set('leaf', false);
alert('success');
selectedNode[0].appendChild({
leaf: true,
text: text,
id: id,
});
}
}
});
}
});
} else {
Ext.MessageBox.alert('Uyarı!', 'Lütfen node eklemek istediğiniz yeri seçiniz!');
}
}
}],
listeners: {
render: function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},
itemcontextmenu : function( view, record, item, index, event){
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
projelerTereeRclckMenu.showAt([x,y]);
},
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
}
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
}
},
}
});
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tree-projeler');
if(!win){
var win = desktop.createWindow({
id: 'window-projeler',
closeAction: 'hide',
title:'Projeler',
width:600,
height:400,
iconCls: 'projectManage-shortcut',
animCollapse:false,
border: false,
hideMode: 'offsets',
layout: 'fit',
items: [
projelerTree,
]
});
}
return win;
},
});

Answer 1

I solved the problem by deleting id's of context menü items, then I needed to devide 'projelerTereeRclckMenu' accoeding to depth of tree. And I finally prepared if condition under riğght click function that shows needed context menü accordin to depth of tree:
/*!
* Ext JS Library 4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing#sencha.com
* http://www.sencha.com/license
*/
Ext.define('MyDesktop.Projeler', {
extend: 'Ext.ux.desktop.Module',
requires: [
//'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
],
id:'tree-projeler',
init : function(){
this.launcher = {
text: 'Projeler',
iconCls:'projectManage-shortcut'
};
},
createWindow : function(){
var projectCreationWin = new Ext.Window({
layout:'form',
title: 'Proje Oluşturma',
closeAction:'hide',
plain: true,
width: 250,
height: 200,
modal : true,
resizable:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Proje Kodu',
emptyText: 'Proje Kodu Yazınız...',
name:'projectCreationWin_projectCode_name',
id:"projectCreationWin_projectCode_id",
width: 100,
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel: 'Proje Adı',
emptyText: 'Proje Adı Yazınız...',
name:'projectCreationWin_projectName_name',
id:"projectCreationWin_projectName_id",
width: 100,
anchor: '100%'
},
],
buttons: [{
text: 'Oluştur',
handler: function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
var projectCode= Ext.getCmp("projectCreationWin_projectCode_id");
var projectCode= projectCode.getValue();
var projectName= Ext.getCmp("projectCreationWin_projectName_id");
var projectName= projectName.getValue();
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addProject',
'code':projectCode,
'name':projectName,
'node': selectedNode[0].data.id,
'depth': '1'
},
success: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},
{
text:'Vazgeç',
handler: function(){
}
}],
listeners:{
beforeshow:function(){
}
}
})
var contractCreationWin = new Ext.Window({
layout:'form',
title: 'Kontrat Oluşturma',
closeAction:'hide',
plain: true,
width: 300,
height: 300,
modal : true,
resizable:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Kontrat Numarası',
emptyText: 'Kontrat Numarası Yazınız...',
name:'contractCreationWin_contractNo_name',
id:"contractCreationWin_contractNo_id",
width: 100,
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel: 'Sas Numarası',
emptyText: 'Sas Numarası Yazınız...',
name:'contractCreationWin_PONo_name',
id:"contractCreationWin_PONo_id",
width: 100,
anchor: '100%'
},
{
xtype: 'radiogroup',
fieldLabel: 'Single Column',
columns: 1,
items: [
{
boxLabel: 'PAC',
name: '222',
inputValue: 1,
id: 'contractCreationWin_RadioPAC_id',
},
{
boxLabel: 'PAT',
name: '222',
inputValue: 2,
id: 'contractCreationWin_RadioPAT_id',
//checked: true
},
]
}
],
buttons: [{
text: 'Oluştur',
handler:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
var contractNo= Ext.getCmp("contractCreationWin_contractNo_id");
var contractNo= contractNo.getValue();
var customerPO= Ext.getCmp("contractCreationWin_PONo_id");
var customerPO= customerPO.getValue();
var ifPAC = Ext.getCmp('contractCreationWin_RadioPAC_id');
var ifPAC= ifPAC.getValue();
//alert(JSON.stringify(ifPACPAT));
if(ifPAC == true){
var contractType = 'PAC';
}else{
var contractType = 'PAT';
}
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addContract',
'code':contractNo,
'name':customerPO,
'parentId': selectedNode[0].data.id,
'depth': '3',
contractType: contractType ,
},
success: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure: function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},
{
text:'Vazgeç',
handler: function(){
alert(this.getValue(true));
}
}],
listeners:{
beforeshow:function(){
}
}
})
function generalCreationButtonStatus(){
if (projelerTree.getSelectionModel().hasSelection()) {
}
}
//function RCLCK(){
var projelerTereeRclckMenu = new Ext.menu.Menu({
listeners:{
beforeShow: function(){
//projelerTereeRclckMenu
generalCreationButtonStatus();
}
},
items:[
{
text: 'Sil',
name: 'tree-context-sil',
listeners: {
beforeshow:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
alert(selectedNode[0].data.depth);
if(selectedNode[0].data.depth==1){
this.hide;
alert('222');
}else{
this.show();
}
},
},
handler : function(){ alert(JSON.stringify(projelerTereeRclckMenu.items[0])); },
},
{
text: 'Proje Oluştur',
name: 'tree-context-proje-olustur',
handler :
function(){
projectCreationWin.show();
}
},
]
});
var fazlarTereeRclckMenu = new Ext.menu.Menu({
listeners:{
beforeShow: function(){
generalCreationButtonStatus();
}
},
items:[
{
text: 'Sil',
name: 'tree-context-sil',
listeners: {
beforeshow:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
alert(selectedNode[0].data.depth);
if(selectedNode[0].data.depth==1){
this.hide;
alert('222');
}else{
this.show();
}
},
},
handler : function(){ alert(JSON.stringify(projelerTereeRclckMenu.items[0])); },
},
{
text: 'Faz Oluştur',
name: 'tree-context-faz-olustur',
handler :
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
Ext.Ajax.request({
url: 'phps/treeloader.php',
params:{
'process':'addNode',
'subProccess': 'addPhase',
'parentId': selectedNode[0].data.id,
'depth': '2'
},
success:
function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Başarıyla Gerçekleştirilmiştir !');
},
failure:
function(response, options) {
Ext.Msg.alert('Dikkat!','İşleminiz Gerçekleştirilemedi!');
}
});
}
},
]
});
var kontratlarTereeRclckMenu = new Ext.menu.Menu({
listeners:{
beforeShow: function(){
generalCreationButtonStatus();
}
},
items:[
{
text: 'Sil',
name: 'tree-context-sil',
listeners: {
beforeshow:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
alert(selectedNode[0].data.depth);
if(selectedNode[0].data.depth==1){
this.hide;
alert('222');
}else{
this.show();
}
},
},
handler : function(){ alert(JSON.stringify(projelerTereeRclckMenu.items[0])); },
},
{
text: 'Kontrat Oluştur',
name: 'tree-context-kontrat-olustur',
handler :
function(){
contractCreationWin.show();
},
},
]
});
var sahalarTereeRclckMenu = new Ext.menu.Menu({
listeners:{
beforeShow: function(){
generalCreationButtonStatus();
}
},
items:[
{
text: 'Sil',
name: 'tree-context-sil',
listeners: {
beforeshow:
function(){
var selectedNode = projelerTree.getSelectionModel().getSelection();
alert(selectedNode[0].data.depth);
if(selectedNode[0].data.depth==1){
this.hide;
alert('222');
}else{
this.show();
}
},
},
handler : function(){ alert(JSON.stringify(projelerTereeRclckMenu.items[0])); },
//iconCls:'icon-grid-del'
},
{
text: 'Saha Oluştur',
handler :
function(){
alert('Sil butonuna tıklandı'); },
name: 'tree-context-saha-olustur',
}
]
});
var projelerTreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
actionMethods: 'post',
url: 'phps/treeloader.php',
extraParams: {
process:'callNode',
}
},
root: {
text: 'Root Node',
id: '0',
parentid:'0',
expanded: false,
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
var projelerTree = Ext.create('Ext.tree.Panel',{
store: projelerTreeStore,
id:'projelerTree-id',
renderTo: Ext.getBody(),
height: 300,
width: 250,
title: 'PMT Ağaç Yapısı',
tbar : [{
text:'Yenile',
handler:
function(){
//projelerTree.getView().refresh();
//projelerTree.treeRefresh();
}
},
{
text: 'add node',
handler:
function(){
if (projelerTree.getSelectionModel().hasSelection()) {
var selectedNode = projelerTree.getSelectionModel().getSelection();
Ext.MessageBox.prompt('Add Node', 'Please enter node text:', function(btn, text){
if (btn == 'ok'){
Ext.Ajax.request({
url: 'phps/treeloader.php',
params: {
nodetext: text,
parentid : selectedNode[0].data.id,
depth: selectedNode[0].data.depth,
process: 'addNode'
},
success: function(response){
var id = response.responseText;
if (id > 0){
selectedNode[0].set('leaf', false);
alert('success');
selectedNode[0].appendChild({
leaf: true,
text: text,
id: id,
});
();
}
}
});
}
});
}else{
Ext.MessageBox.alert('Uyarı!', 'Lütfen node eklemek istediğiniz yeri seçiniz!');
}
}//handler
}],
listeners: {
render:
function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true}
);
},
itemcontextmenu :
function( view, record, item, index, event ){
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
var selectedNode = projelerTree.getSelectionModel().getSelection();
var depth = selectedNode[0].data.depth;
if(depth==0){
projelerTereeRclckMenu.showAt([x,y]);
}else if(depth ==1){
fazlarTereeRclckMenu.showAt([x,y]);
}else if(depth == 2){
kontratlarTereeRclckMenu.showAt([x,y]);
}else if(depth == 3){
sahalarTereeRclckMenu.showAt([x,y]);
}
},
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn:
function(){
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
}
},
}
});
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tree-projeler');
if(!win){
var win = desktop.createWindow({
id: 'window-projeler',
listeners:{
beforeshow:function(){
projelerTereeRclckMenu.hide();
}
},
//closeAction: 'destroy',
title:'Projeler',
width:600,
height:400,
iconCls: 'projectManage-shortcut',
animCollapse:false,
border: false,
closeAction: 'hide',
hideMode: 'offsets',
layout: 'fit',
items: [
projelerTree,
]
});
}
return win;
},//Createwindow function ens here
});