`

一个简单的后台布局

EXTHTML 
阅读更多 
<html>
<head>
<meta charset="UTF-8" />
<title>ext_st_index</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/src/locale/ext-lang-zh_CN.js"></script>
</head>

<body>
<script>
 Ext.onReady(function(){
  var top = new Ext.Panel({
        region: 'north',
		title: 'title',
        html: '33333',
        autoHeight: true,
        height: 200,
        border: false,
        margins: '0 0 5 0'
  });
  
  
   var center = new Ext.TabPanel({
        region: 'center',
		items:{
		  id:'index',
		  title:'首页',
		  html:'欢迎进入小说管理系统'
        },
        enableTabScroll:true
   });
   center.setActiveTab('index');
   
   
  var root = new Ext.tree.TreeNode({
		id:'root',
		text : '根节点'
	 });
			
  var node1 = new Ext.tree.TreeNode({
		text : '书籍类型维护',
		id:node1
		
  });
  
  var node2 = new Ext.tree.TreeNode({
		text : '书籍维护',
		id: node2,
		url : 'www.qidian.com'
  });
		
  var node11 = new Ext.tree.TreeNode({
			text : '添加书籍类型维护',
			url : '5-21.html',
			
   });
   
  var node12 = new Ext.tree.TreeNode({
			text : '删除书籍类型维护',
			url : 'http://www.baidu.com'
   });
   
   node1.appendChild(node11);
   node1.appendChild(node12);
   root.appendChild(node1);
   root.appendChild(node2);

   var left = new Ext.tree.TreePanel({
		region: 'west',
	    xtype: 'treepanel',
        collapsible: true,
        title: 'Navigation',
        width: 200,
        autoScroll: true,
        split: true,
		//root:root,
		listeners: {
            click: function(n) {
                var url= n.attributes.url;
                var id= n.attributes.id;
				//alert(id+'-----'+url);
                var p = center.getItem(id);
                if(url){
                   if(p){
                      center.setActiveTab(p);
                   }else{
                      p= new Ext.Panel({
						title:n.attributes.text,
						autoLoad:{url:url,scripts:true},
						closable:true,
						id:id
                      });
					 center.add(p);
					 center.setActiveTab(p);
                   }
                }
			}
		}
   });
 
   left.setRootNode(root);
  
   
   var bottom = new Ext.Panel({
     	region: 'south',
        title: 'Information',
        collapsible: true,
        html: '版权所有',
        split: true,
        height: 100,
        minHeight: 100
   });
  
 
  var vp =  new Ext.Viewport({
		  layout:'border',
		  items:[top,left,center,bottom],
		  renderTo : Ext.getBody()
    });
    left.expandAll();
 });

</script>


</body>
</html>
分享到：
| tomcat管理员用户配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics