Extjs树上下文菜单在第二次打开时混合



下面,当我关闭并重新打开窗口"projeler"时,树的上下文菜单会自行损坏。当我重新打开窗户时,只有第一件东西会损坏自己。似乎有两个标签混杂在一起。我试图删除"generalCreationButtonStatus",但在菜单的第一项上也出现了同样的错误。你能帮忙吗?

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;
},

});

我通过删除上下文项的id来解决问题,然后我需要根据树的深度设计"projelerTereeRCLKMenu"。最后,我准备了根据树的深度显示所需上下文的点击函数下的条件:

/*!*ExtJS库4.0*版权所有(c)2006-2011 Sencha股份有限公司。*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

});

最新更新