PDA

View Full Version : how to make a center region open its items on new tab with out closing the other..



mohaskuar
25 Jul 2012, 1:21 AM
hi,i wanted to do some thing like ext docs. when u click one example from west it opens with new tab in the center region...

MaximusDecimus
25 Jul 2012, 2:13 AM
Use a tabPanel?

mohaskuar
25 Jul 2012, 3:30 AM
please make it clear as posible

listener code
function clicklistner(view, record, item, index, event) {

nodeId = record.data.id;
var p1=Ext.getCmp('content-panel').getLayout();
p1.setActiveItem(nodeId);

}


center region
var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
items:[policy[0],ds[0],ds[1],sys[0]]

};

MaximusDecimus
25 Jul 2012, 3:32 AM
You want a new tab or do you want an other view activated in your cardlayout?

mohaskuar
25 Jul 2012, 3:36 AM
i want another view activated with out closing the first one when listener is activated means a tree child is clicked..just like addind a new tab in firefox

MaximusDecimus
25 Jul 2012, 3:42 AM
If you want tabs, you need a tabPanel. If you dont need tabs:
The way i do it, is by adding the views to the cardLayout. My views are all Ext.panel.Panel.
you can then activate them by using the id of the given Panel.


var contentPanel = { id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
items:[policy[0],ds[0],ds[1],sys[0]]

};

I have no idea what those items are, but if they where panels:



var panel;
contentPanel.add(panel);


Function of listener:


contentPanel.getLayout().setActiveItem('id-of-panel');

mohaskuar
25 Jul 2012, 3:49 AM
this will replace the center region with the new pane...i dont want to replace them ..just to add then in center region...for example i want to have all of my items...opened...as tabs

WillBill
25 Jul 2012, 4:02 AM
I think he does want a tabPanel, seeing has he is refering to sencha docs and firefox tabs.
Go to http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel, take a look at the example.

You can add tabs to a tabpanel by using:
Ext.getCmp('yourTabPanel').add(Ext.create('Ext.panel.Panel', { title: 'tab', html: 'content' }));

friend
25 Jul 2012, 4:37 AM
@mohaskuar

Here's functional example of a TabPanel with Tree Menu. Note that it doesn't use MVC and I coded everything in-line, just so it's easier to follow. Regardless, I highly recommend learning/using the ExtJS MVC design methodology.

Also, this example also doesn't take into account closing/hiding of tabs; I leave that up to you as a learning experience.



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<title>BadMonkey.com - Demo App</title>
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Admin",
expanded: true,
id: 'admin',
children: [{
text: 'Locations',
leaf: true,
id: 'admin_locations'
},{
text: 'Users',
leaf: true,
id: 'admin_users'
}]
},{
text: "Utilities",
expanded: true,
id: 'Utilities',
children: [{
text: "Reports",
leaf: true ,
id: 'util_reports'
},{
text: "System Maintenance",
leaf: true,
id: 'util_maintenance'
}]
}]
}
});

var treePanel = Ext.create('Ext.tree.Panel', {
region: 'west',
title: 'Menu',
width: 200,
height: 150,
listeners: {
itemclick: function(view, record, item, index, evt, eOpts) {
var menuId = record.get('id');
var nodeText = record.get('text');

// if it's a branch, display node text.
if (!record.get('leaf')) {
Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
return;
}

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

// see if the target tab already exists.
var childTab = tabPanel.child('#' + menuId);

// if not, create it.
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);
}

// set the tab active/visible.
tabPanel.setActiveTab(childTab);
}
},
store: treeStore,
rootVisible: false
});


Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
collapsible: true,
frame: true,
height: 65,
html: '<span style="font-size: 24px;">Application Name Here</span>',
title: 'BadMonkey.com'
},
treePanel
,{
xtype: 'tabpanel',
region: 'center',
items: [{
xtype: 'panel',
bodyPadding: 5,
itemId: 'home',
title: 'Home',
html: 'Home Page Content Here'
}]
},{
xtype: 'panel',
region: 'south',
frame: true,
height: 32,
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
items: [{
xtype: 'container',
html: '&copy; 2012, BadMonkey.com'
},{
xtype: 'container',
flex: 1,
html: '<a href="mailto:help@badmonkey.com?Subject=Bad monkey, needs spanking...">Email Support</a>',
style: {
textAlign: 'right'
}
}]
}]
});
});
</script>

</head>

<body>
</body>
</html>

mohaskuar
25 Jul 2012, 4:55 AM
have some body told you that you are a life saver.......10ks verryyyyy much...thats exactly what i wanted

mohaskuar
7 Aug 2012, 12:05 AM
i have been trying so hard to expand and use the above code for couple of days...i wanted to change the



html: 'This is the ' + nodeText + ' Tab content',

with some thing dynamic ...like a grid in grid.js file......what the best way to do it?