PDA

View Full Version : tree panel leaf click open new tabpanel



javapurna
11 Apr 2013, 10:27 PM
hi every one,
i have requirement to click in tree panel leaf node open new tab panel .i am doing that ,but my requirement is i am click on another leaf update previously opened tab panel . how to do ths one i am using itemclick.
my code is like

listeners: {
itemclick: function(view, record, item, index, evt, eOpts) {
var menuId = record.get('id');
alert('menuId'+menuId);
var nodeText = record.get('text');
alert('nodeText'+nodeText);
if (!record.get('leaf')) {
Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
return;
}
var tabPanel = this.up('viewport').down('tabpanel');
var childTab = tabPanel.child('#' + menuId);
alert(childTab);
if (childTab == null) {
childTab = Ext.create('Ext.panel.Panel', {
xtype: 'panel',
bodyPadding: 5,
html: 'This is the ' + nodeText + ' Tab content',
itemId: menuId,
title: nodeText
});

tabPanel.add(childTab);
}
tabPanel.setActiveTab(childTab);
}
},

slemmon
13 Apr 2013, 12:31 PM
After you reference childTab if it exists you're just wanting to update the HTML in that tab panel, is that correct?

*If you wrap your code in [ ] code tags it will really help with readability.
Also, you might use record.isLeaf() instead of record.get('leaf').

javapurna
14 Apr 2013, 8:38 PM
thank you very much for replaying slemmon (http://www.sencha.com/forum/member.php?67514-slemmon).


my code is like below to achive my task is it correct or not suggest me .

var TaxPreparation = Ext.create('Ext.panel.Panel',{
id:'taxpreparationevent',
width: 175,
minSize: 100,
maxSize: 250,
hidden:true,
dockedItems: [{
cls:'icons',
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'label',
html: "Tax Preparation Events"
},'->',
Taxclose
]

}],
items:[this.getTaxPreparationEvents()]

});

getTaxPreparationEvents:function(){
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text:'All Events',
id:'AllEvents',
children: [{
text: "Lobby(3)",
leaf: true,
id:'Lobby',
}, {
text: "Drop Of(3)",
leaf: true,
id:'Drop Of',
},{
text: "Tax Preparation(2)",
leaf: true,
id:'Tax Preparation',
},{
text: "Review(1)",
leaf: true,
id:'Review',
},{
text: "EF Ready(0)",
leaf: true,
id:'EF Ready',
},{
text: "Cashier(0)",
leaf: true,
id:'Cashier',
},{
text: "Check Pickup(5)",
leaf: true,
id:'Check Pickup',
}]

}
});
var tree= Ext.create('Ext.tree.Panel', {
title: 'New Schedule',
cls:'NewSchedule',
width: 200,
height:720,
header:false,
border:false,
store: store,
rootVisible: true,
listeners: {
itemclick: function(view, record, item, index, evt, eOpts) {
var menuId = record.get('id');
Ext.state.Manager.set('itemclicked',menuId);
var nodeText = record.get('text');
if (!record.get('leaf')) {
Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
return;
}
var tabPanel = this.up('viewport').down('tabpanel');
console.dir(tabPanel);
var childTab = tabPanel.child('#' + menuId);
if(Ext.state.Manager.get('TaxPreparationEvent')== undefined){
if (childTab == null) {
childTab = Ext.create('Ext.tab.Panel', {
bodyPadding: 5,
closable:true,
html: 'This is the ' + nodeText + ' Tab content',
itemId: menuId,
title: nodeText,
listeners: {
beforeclose: function(cmp) {
Ext.Msg.alert('Event', 'The beforeclose event fired!');
},
close: function(cmp) {
Ext.state.Manager.clear('TaxPreparationEvent');
}
}
});

Ext.state.Manager.set('TaxPreparationEvent','yes');
tabPanel.add(childTab);

}
}else{
var tabPanel = this.up('viewport').down('tabpanel');
var childTab = tabPanel.getComponent(3);
childTab.update({
html: 'This is the ' + nodeText + ' Tab content',
itemId: menuId,
title: nodeText,
bodyPadding: 5,
});
childTab.setTitle(nodeText);
//this.ownerCt.setTabTitle( 0,nodeText );
}
tabPanel.setActiveTab(childTab);

}
},
});

return tree;
},

present my tree panel is static data . in further i click on leaf new panel is opened. i am using


var tabPanel = this.up('viewport').down('tabpanel');

console.dir(tabPanel);
var childTab = tabPanel.child('#' + menuId);
if(Ext.state.Manager.get('TaxPreparationEvent')== undefined){
if (childTab == null) {
childTab = Ext.create('Ext.tab.Panel', {
bodyPadding: 5,
closable:true,
html: 'This is the ' + nodeText + ' Tab content',
itemId: menuId,
title: nodeText,
listeners: {
beforeclose: function(cmp) {
Ext.Msg.alert('Event', 'The beforeclose event fired!');
},
close: function(cmp) {
Ext.state.Manager.clear('TaxPreparationEvent');
}
}
});

Ext.state.Manager.set('TaxPreparationEvent','yes');
tabPanel.add(childTab);

}
}else{
//var tabPanel = this.up('viewport').down('tabpanel');
var childTab = tabPanel.getComponent(3);
childTab.update({
html: 'This is the ' + nodeText + ' Tab content',
itemId: menuId,
title: nodeText,
bodyPadding: 5,
});
childTab.setTitle(nodeText);

}
tabPanel.setActiveTab(childTab);

}
?

in every leaf click updating tab panel fine this time with html content. but i want gridpanel to evey update panel ,how to add grid(gridpanel columns change evey timer

slemmon
15 Apr 2013, 11:53 AM
I'm trying to follow what you're looking to do.
What are you wanting to update when the user clicks on a leaf? Add a new tab? Update content on an existing tab? Reconfigure columns of a grid?

Also, PLEASE use [ ] code tags and indented code when providing code examples. It will make your code much more readable and the community will be more inclined to help you. Also, for readability the green font is particularly challenging to read.



code in code tags