ext-js页面布局

首先这个布局分上中下，然后中间又分左中右，我把各个区域都单独成一个JS类，便于重用。以后遇到这种布局就一劳永逸，(*^__^*) 。下面分别贴出各个区域的JS类源码：
//顶部Panel类：
Ext.namespace("sys");
sys.TopPanel = Ext.extend(Ext.Panel,{
  constructor:function(cfg){
   if(!cfg)cfg = {};
   cfg.id = 'topPanel';
   cfg.height = 60;
   cfg.bodyStyle = 'background:transparent;';
   cfg.html = '<iframe  width= 100% height=99 frameborder=0 scrolling=no src=\'Top.jsp\'></iframe>';
   cfg.region = 'north';
   sys.TopPanel.superclass.constructor.call(this, cfg);
  }
}
);
顶部panel我嵌入一个iframe,iframe再链接到一个jsp页面，top.jsp的代码就不用贴了，再简单不过了。
然后是BottomPanel类：
Ext.namespace("sys");
sys.BottomPanel = Ext.extend(Ext.Panel, {
    constructor: function(cfg) {
        if (!cfg) cfg = {};
        cfg.id = 'bottomPanel';
        cfg.title = '底部面板';
        cfg.height = 65;
        cfg.bodyStyle = 'background:transparent;';
        cfg.iconCls = 'footIcon';
        cfg.html = '<iframe width=100% height=50 frameborder=0 scrolling=no src=\'Bottom.jsp\'></iframe>';
        cfg.region = 'south';
        cfg.collapsible = true;
        cfg.collapseMode = 'mini';
        cfg.titleCollapse = true;
//        var bbar = new Ext.Toolbar(
//           {
//               items: [
//                '->',
//                {
//                    text: '我的消息',
//                    iconCls: 'msgIcon'
//                }
//            ]
//           }
//        );
//        cfg.tbar = bbar;
        sys.BottomPanel.superclass.constructor.call(this, cfg);
    }
}
);
然后是左侧Panel类：
Ext.namespace("sys");
sys.LeftPanel = Ext.extend(Ext.Panel, {
    constructor: function(cfg) {
        if (!cfg) {
            cfg = {};
        }
        cfg.id = "leftPanel";
        cfg.title = '导航菜单';
        cfg.iconCls = 'appIcon';
        cfg.width = 160;
        cfg.height = 600;
        cfg.region = 'west',
  cfg.collapsible = true;
        cfg.animCollapse = true;
        cfg.split = true;
        cfg.collapseMode = 'mini';
        cfg.layout = 'accordion';
        //var theme = new Ext.ux.ThemeChange();
        //cfg.tbar = theme;
        sys.LeftPanel.superclass.constructor.call(this, cfg);
    }
});
//右侧Panel类：
Ext.namespace("sys");
sys.RightPanel = Ext.extend(Ext.Panel, {
    constructor: function(cfg) {
        if (!cfg) {
            cfg = {};
        }
        cfg.id = 'rightPanel';
        cfg.title = '编辑窗口';
        cfg.iconCls = 'editIcon';
        cfg.width = 305;
        cfg.height = 600;
        cfg.region = 'east';
        cfg.layout = 'form';
        cfg.collapsible = true;
        cfg.titleCollapse = true;
        cfg.animCollapse = true;
        cfg.split = true;
        cfg.collapseMode = 'mini';
        cfg.bodyStyle = 'background:#ccd9e9;';
        cfg.collapsed = true;    //渲染面板后面板默认处于闭合状态
        cfg.layout = 'fit';
        sys.RightPanel.superclass.constructor.call(this, cfg);
    }
});
接着下面是CenterPanel中间面板类全部源码：
Ext.namespace("sys");
sys.CenterPanel = Ext.extend(Ext.TabPanel, {
    constructor: function(cfg) {
        if (!cfg) cfg = {};
        cfg.id = 'centerTabPanel';
        cfg.width = 500;
        cfg.height = 600;
        cfg.activeTab = 0;         //默认打开第一个标签页
        cfg.tabWidth = 150;
        cfg.minTabWidth = 120;
        cfg.enableTabScroll = true;
        cfg.autoScroll = true;    //标签页超过范围是否显示滚动按钮
        cfg.region = 'center';
        //var theme = new Ext.ux.ThemeChange();
        //cfg.bbar = ["<span style='color:#00aa00;'>更换皮肤</span>：",theme];
        var wpanel = new Ext.Panel({
            id: 'wel',
            title: '欢迎页面',
            border: false,
            closable: true,
            iconCls: 'modelIcon',
            bodyStyle: 'padding-top:3px;',
            listeners: {
                'render': function() {
                    wpanel.getUpdater().update({
                        url: 'Welcome.jsp'
                    });
                }
            }
        });
        cfg.items = [wpanel];
        cfg.activeItem = 0;
        sys.CenterPanel.superclass.constructor.call(this, cfg);
    }
});
然后是整个区域的面板类MainPanel,采用border布局，把上面的TopPanel，BottomPanel,LeftPanel,RightPanel,CenterPanel放置进去,下面是MainPanel的源码：
Ext.namespace("sys");
sys.MainPanel = Ext.extend(Ext.Panel, {
    constructor: function(cfg) {
        if (!cfg) {
            cfg = {};
        }
        cfg.width = 1025;
        cfg.height = 643;
        cfg.border = true;
        cfg.layout = 'border';
        //center
        this.center = new sys.CenterPanel();
        //left
        this.left = new sys.LeftPanel();
        //right
        this.right = new sys.RightPanel();
        //top
        this.top = new sys.TopPanel();
        //bottom
        this.bottom = new sys.BottomPanel();
        cfg.items = [this.top, this.bottom, this.left, this.center, this.right];
      
        sys.MainPanel.superclass.constructor.call(this, cfg);
    }
}
);
封装完毕后，页面使用起来就非常爽咯，直接New个MainPanel然后丢给viewport就完事了。
下面是我index.jsp的代码：
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/sys/TopPanel.js"></script>
    <script type="text/javascript" src="js/sys/BottomPanel.js"></script>
    <script type="text/javascript" src="js/sys/LeftPanel.js"></script>
    <script type="text/javascript" src="js/sys/RightPanel.js"></script>
    <script type="text/javascript" src="js/sys/CenterPanel.js"></script>
    <script type="text/javascript" src="js/sys/MainPanel.js"></script>
  </head>

  <body>
      <script type="text/javascript">
       Ext.onReady(function() {
           Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
           Ext.QuickTips.init();
           Ext.form.Field.prototype.msgTarget = 'side';
           Ext.Msg.minWidth = 300;
           var main = new sys.MainPanel();    //创建主面板
           new Ext.Viewport({
                lauyout: 'fit',
                items: [main]
           });
       }
     );
    </script>
  </body>
到此ExtJs的经典布局就彻底实现了，剩下的就是往各区域Panel里放你要的组件，比如左侧一般放TreePanel，中间放GridPanel,右侧放FormPanel，这样就彻底不用考虑恼人的布局问题