PDA

View Full Version : Adding new grid panel tab when clicking button



LetItRock
18 Dec 2013, 6:21 AM
Hi everyone.
I have Main panel with border layout and on west side of this panel I have menu panel with buttons and on the center tab panel.
Im trying to make this functionality in my app:
- when I click on button from menu, I need to add grid panel into tab panel
- when I click on same button again I need to set active this grid tab
- if grid tab was closed I need to recreate it and show


Here is my code:
Main panel:




Ext.define('Verto.view.mainPanel.MainPanel', {
extend:'Ext.panel.Panel',
alias:'widget.MainPanel',
itemId:'IdMainPanel',


title: 'GLOWNY PANEL',
header: {
titlePosition: 2,
titleAlign: 'center'
},
layout:'border',
bodyStyle:'background:#fff',
anchor:'0 0',
items:[{
xtype:'tabpanel',
itemId:'mainTabPanelId',
activeTab:0,
region:'center',
layout:'fit',
items:[{
xtype:'panel',
closable:false,
title:'Home'
}]
},{
xtype:'panel',
region:'west',
width:135,
title:'Menu',
collapsible:true,
collapsed:false,
layout:'border',
bodyStyle:'color:white',
items:[{
xtype:'button',
scale:'medium',
id:'IdMPButton',
text:'Modu?',
region: 'north',
height:40,
resizable:false,
menu:[{
text:'Kontrahenci',
id:'IdMPCustomers'
}]
},
{
xtype:'button',
scale:'medium',
id:'IdCRM',
text:'CRM',
region: 'north',
height:40,
resizable:false,
menu:[{
text:'Kontrahenci'
}]
},
{
xtype:'button',
scale:'medium',
id:'IdAbout',
text:'O programie',
region: 'north',
height:40,
resizable:false,
menu:[{
text:'Kontrahenci'
}]
},
{
xtype:'button',
scale:'medium',
id:'IdLogout',
text:'Wyloguj',
region: 'south',
height:40,
resizable:false
}]
}],
resize: function( me, width, height, oldWidth, oldHeight, eOpts ){
console.log(width+' '+height);
}
});



This grid tab panel:
Buttons in it has itemIds.


Ext.define('Verto.view.customers.CustomersGrid',{
extend: 'Ext.grid.Panel',
alias: 'widget.customersgrid',
title: 'Kontrahenci',


store:'Customers',
region:'center',
itemId:'CGPanelId',
closeAction:'hide',
autoDestroy: false,
closable:true,


initComponent: function () {
this.width = 650;
this.columns = [
{
text : 'Lp.',
width : 50
},
{
text : 'Nazwa pe?na',
flex : 1,
sortable : true,
dataIndex: 'fullName'
},
{
text : 'Nazwa skrócona',
width : 150,
sortable : true,
dataIndex: 'shortcutName'
},
{
text : 'Numer',
width : 120,
sortable : true,
dataIndex: 'number'
},
{
text : 'NIP',
width : 120,
sortable : true,
dataIndex: 'tin'
},
{
text : 'Adress email',
width : 180,
sortable : true,
dataIndex: 'emailAdress'
},
{
text : 'Telefon',
width : 120,
sortable : true,
dataIndex: 'phoneNumber'
},
{
text : 'Miasto',
width : 120,
sortable : true,
dataIndex: 'city'
},
{
text : 'Ulica',
width : 120,
sortable : true,
dataIndex: 'street'
},
{
text : 'Kod pocztowy',
width : 120,
sortable : true,
dataIndex: 'postCode'
},
{
text : 'Województwo',
width : 120,
sortable : true,
dataIndex: 'province'
},
{
text : 'Kraj',
width : 90,
sortable : true,
dataIndex: 'country'
}
];


this.callParent();
},
dockedItems:[{
xtype:'toolbar',
flex:1,
dock:'top',


items:[
Verto.util.EditButtonsUtilFactory.createShowButton('CGPShowButtonId'),
Verto.util.EditButtonsUtilFactory.createAddButton('CGPAddButtonId'),
Verto.util.EditButtonsUtilFactory.createEditButton('CGPEditButtonId'),
Verto.util.EditButtonsUtilFactory.createDeleteButton('CGPDeleteButtonId')
]


}]


});



And method from controller which is called after click event:


onIdMPCustomersButtonClick:function(){
var mainPanel = Ext.ComponentQuery.query('panel #IdMainPanel')[0];
mainPanel.header.setTitle('KONTRAHENCI');


var mainTabPanel = Ext.ComponentQuery.query('panel #mainTabPanelId')[0];


/*var newCGPanel = mainTabPanel.items.findBy(function(tab){
return tab.itemId === 'CGPanelId';
});*/


if(!this.customerTab){
this.customerTab = Ext.create('Verto.view.customers.CustomersGrid');
mainTabPanel.add(this.customerTab).show();
}else{
if(!this.customerTab.rendered){
mainTabPanel.remove(this.customerTab);
delete this.customerTab;
this.customerTab = Ext.create('Verto.view.customers.CustomersGrid',{
closable:true,
requires:['Verto.util.EditButtonsUtilFactory'],
});
mainTabPanel.add(this.customerTab).show();
}
}


mainTabPanel.setActiveTab(this.customerTab);
mainTabPanel.doLayout();
}



Things like closeAction:'hide' and in this resources doesnt helps me:
http://www.sencha.com/forum/showthread.php?55769-adding-a-new-tab-with-grid-to-the-tabPanel-by-button-click
(http://www.sencha.com/forum/showthread.php?55769-adding-a-new-tab-with-grid-to-the-tabPanel-by-button-click)http://www.sencha.com/forum/showthread.php?175180-Tab-Panel-problem-opening-previously-closed-tabs


Where is my mistake? Need help. Sorry for my english and thanks for reply.

LetItRock
18 Dec 2013, 7:35 AM
At first time everything is going well until I close this grid panel, and after I trying to open it again I have error like: Uncaught TypeError: Cannot read property 'addCls' of null.

Kevin Jackson
24 Dec 2013, 10:21 AM
No worries about the English, I just need a bit of clarification.

You said
- if grid tab was closed I need to recreate it and show

Are you saying that you would like to close the tab but also be able to retrieve it later? I would think closeAction: 'hide' is what you are looking for but I am not sure that I understand your question.