PDA

View Full Version : How to add conent into a tab and use different components in one app



v2108
18 Jul 2012, 8:32 AM
Hi,
I'm totally new to extjs and I must develop a layout with a tab panel and a tree in a tab. I have already made the tab panel, but how can I include a tree into an item of a tab panel?

Another problem for me is to use different components, like a tree and a formulare on one page. Can I write two Ext.Create() commands behind one another? Or is there another procedure?

I would be very pleased, if you could help me, because I need it very soon.

Nice Greets, Victoria

friend
18 Jul 2012, 9:42 AM
Here's some sample code which uses a Viewport/border layout to manage a Tab Panel and Tree Panel (used as a menu system).

This sample uses Ext.create() as well as 'xtype' construction and everything is done in-line.

A better approach would be to use the ExtJS MVC architecture; regardless, this gives you some functional code to learn by...



<!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,
leaf: false,
children: [{
text: 'Locations',
leaf: true
},{
text: 'Users',
leaf: true
}]
},{
text: "Utilities",
expanded: true,
children: [{
text: "Reports",
leaf: true
},{
text: "System Maintenance",
leaf: true
}]
}]
}
});

var treePanel = Ext.create('Ext.tree.Panel', {
region: 'west',
title: 'Menu',
width: 200,
height: 150,
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,
title: 'Tab 1',
html: 'Some content here.'
},{
xtype: 'panel',
bodyPadding: 5,
title: 'Tab 2',
html: 'More banal, boring textual 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'
//width: 180
},{
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>

v2108
18 Jul 2012, 9:52 PM
That's nice, but I wanted to know how I get the tree into the content of one tab. For example the tree should just be shown in tab two and not in tab one. Is this also possible?