extjs 经典布局

// 左边功能树
var menuTree = new Ext.tree.TreePanel({
region : 'west',
title : '功能菜单',
width : 180,
minSize : 150,
maxSize : 200,
split : true,
autoScroll : true,
autoHeight : false,
collapsible : true,
rootVisable : false,

// 不显示根节点
root : new Ext.tree.TreeNode({
   id : 'root',
   text : '功能菜单',
   draggable : false,
   expanded : true
})
});

// 添加第一个节点(html)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id : 'htmlPanel',
text : '通过html打开',
listeners : {
   'click' : function(node, event) {
    event.stopEvent();
    var n = contentPanel.getComponent(node.id);
    if (!n) {
     // 判断是否已经打开该面板
     n = contentPanel.add({
      'id' : node.id,
      'title' : node.text,
      closable : true,
      html : '<div>通过html载入目标页面html代码</div>' // 通过html载入目标页
     });
    }
    contentPanel.setActiveTab(n);
   }
}
}));

// 添加第二个节点(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id : 'autoLoadPanel',
text : '通过autoLoad打开',
listeners : {
   'click' : function(node, event) {
    event.stopEvent();
    var n = contentPanel.getComponent(node.id);
    if (!n) {
     //判断是否已经打开该面板
     n = contentPanel.add({
      'id' : node.id,
      'title' : node.text,
      closable : true,
      // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
      autoLoad : {
       url : 'http://localhost:8080/myssh2/index.jsp',
       scripts : true
      }
     });
    }
    contentPanel.setActiveTab(n);
   }
}
}));

// 添加第三个节点(function)

menuTree.root.appendChild(new Ext.tree.TreeNode({
id : 'functionPanel',
text : '通过函数打开',
listeners : {
   'click' : function(node, event) {
    event.stopEvent();
    var n = contentPanel.getComponent(node.id);
    if (!n) {
     var p = new fnPanel();
     p.id = node.id;
     p.title = node.text;
     n = contentPanel.add(p);
    }
    contentPanel.setActiveTab(n);
   }
}
}));

// 通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable : true,
autoScroll : true,
layout : 'fit',

// 如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容
// 创建面板内容

createFormPanel : function() {
   return new Ext.form.FormPanel({
    buttonAlign : 'center',
    labelAlign : 'right',
    frame : false,
    bodyBorder : false,
    bodyStyle : 'padding:25px',
    items : [{
     xtype : 'textfield',
     fieldLabel : '用户名',
     width : 350,
     name : 'username'
    }, {
     xtype : 'textfield',
     fieldLabel : '密　码',
     width : 350,
     name : 'password'
    }],
    buttons : [{
     text : '登陆'
    }, {
     text : '取消'
    }]
   });
},

// 重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent : function() {
   fnPanel.superclass.initComponent.call(this);
   this.fp = this.createFormPanel();
   this.add(this.fp);
}
});

// 右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
activeTab : 0,
items : [{
   id : 'homePage',
   title : '首页',
   autoScroll : true,
   //html : '<h1>Hello 东东</h1>'
   autoLoad : {
    url : 'http://localhost:8080/myssh2/index.jsp',
    scripts : true
   }
}]
});


Ext.onReady(function() {
new Ext.Viewport({
   layout : 'border', //使用border布局
  
   defaults : {
    activeItem : 0
   },
   items : [{
    region : "north",
    height : 50,
    html : '<center><h1>此处显示标题图片</h1></center>'
   },
   menuTree, contentPanel, 
   {
    region : "south",
    height : 50,
    html : '<center><h1>此处显示版权信息</h1></center>'
   }]
});
});