Viewport实例

左侧是树形结构，点击树节点，右侧会显示对应页面。

Ext.onReady(function() {
	Ext.BLANK_IMAGE_URL = 'ext-2.1/resources/images/default/s.gif';
	var tree = new Ext.tree.TreePanel({
				region : 'west',
				// True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
				collapsible : true,
				title : '标题',// 标题文本
				width : 200,
				border : false,// 表框
				autoScroll : true,// 自动滚动条
				animate : true,// 动画效果
				rootVisible : true,// 根节点是否可见
				split : true,
				tbar : [{
							text : '展开',
							handler : function() {
								tree.expandAll();
							}
						}, '-', {
							text : '折叠',
							handler : function() {
								tree.collapseAll();
								tree.root.expand();
							}
						}],
				listeners : {
					click : function(node) {
						// 得到node的text属性
						Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text
										+ "'");
					}
				}
			});
	var root = new Ext.tree.TreeNode({
				text : '我是根'
			});
	var root_node1 = new Ext.tree.TreeNode({
				text : '我是根的1枝',
				href : 'menu.jsp',
				hrefTarget : 'main'
			});
	var root_node2 = new Ext.tree.TreeNode({
				text : '我是根的2枝',
				href : 'tree.jsp',
				hrefTarget : 'main'
			});
	// 插入节点为该节点的最后一个子节点
	root.appendChild(root_node1);
	root.appendChild(root_node2);
	// 设置根节点
	tree.setRootNode(root);

	new Ext.Viewport({
		enableTabScroll : true,
		layout : 'border',
		items : [{
					title : '面板',
					region : 'north',
					height : 50,
					html : '<h1>网站后台管理系统</h1>'
				}, tree, {
					id : 'main',
					region : 'center',
					html : '<iframe name="main" width="100%" height="100%"></iframe>'
				}]
	});
});

参考：http://blog.csdn.net/itlwc/article/details/7873869

http://bbs.csdn.net/topics/370090561