一个extjs写的主页布局的demo

来源：互联网发布：谷嫂的淘宝店编辑：程序博客网时间：2024/04/27 16:19

有一个csdn的网友想要一个extjs的layout效果，原帖在：http://topic.csdn.net/u/20090316/15/5c3ded22-1903-488c-ac87-0ae72fe0722c.html ;
我给他写了一个demo;

我主要做了这样一些改进：
1 对js文件作了拆分，即方便阅读，也方便管理，我按照layout把js拆分为north.js, west.js, south.js, index.js,每个js分别作对应区域的对象的构造。
2 layout对应的各个region，以及每个region里面包含的对象都显示的定义出来，这样方便操作。
时间太少，所以所有的图标我都只用了一个，但是我定义在style里面，楼主只要添加一些style，更改一下对象的iconCls属性就可以了。
中心区域的9个panel楼主也可以拿出来显示的定义他们，这样操作起来更好。

注意：很多人私下找我要文件，基本每周都有两三个人发这个文件，现在我把它打包放在cnblogs上，大家可以下载：

http://files.cnblogs.com/sunxing007/work.zip

内有说明文件教你怎么放文件，如果觉得好的话，别忘了回来顶一下。我给很多人回邮件，可是那些收到我文件的人居然没有一个给我回哪怕一个thank you。哎！

预览效果图如下：

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎光临xxxx综合系统</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.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/source/locale/ext-lang-zh_CN.js"></script>
    

    

    <script type="text/javascript" src="south.js"></script>
    <script type="text/javascript" src="north.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="west.js"></script>
    

<style type="text/css">
html, body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11pt;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
p {
     margin:5px;
}
    .settings {
        background-image:url(images/folder_wrench.png);
    }
    .nav {
        background-image:url(images/folder_go.png);
    }
    .tabs {
    background-image:url( images/gears.gif ) !important;
    }
    .file-upload {
  border-color : #4CA0FF;
  background-color : #EAE8FF;
  border-style : solid;
  border-width : 1px;
  height:18px;
}
.div-search-company{
  padding: 5px 5px 5px 5px;
  /*height:100px;*/
  /*border: solid red 1px;*/
}
.folder .x-tree-node-icon {
  background:transparent url(ext/resources/images/default/tree/folder.gif);
}
.x-tree-node-expanded .x-tree-node-icon {
  background:transparent url(ext/resources/images/default/tree/folder-open.gif);
}
.search {
  background-image:url(images/rss_go.png) !important;
}
    </style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="north">
</div>
<div>
<br><br>
<div id="center1" style="padding-top:20px"></div>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south">
</div>

</body>
</html>

index.js:

var southRegion = {
    region: 'south',
    xtype: 'panel',
    split: false,
    height: 30,
    collapsible: true,
    html: 'dddd',
    margins: '0 0 0 0',
bbar:[
   new Ext.Toolbar.TextItem('工具栏 '),
   {xtype:"tbfill"},
   new Ext.Toolbar.TextItem('XXXX省税务局综合平台'),
   {xtype:'tbseparator'},
   new Ext.Toolbar.TextItem('技术支持 <a href=http://www.163.com>XXXX信息技术有限公司</a>'),
   {pressed:false,text:'与我们联系',iconCls: 'tabs'}
]

};

north.js:

/** Open the quick tips */
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

/** redefine the blank image url */
var imagePath = 'ext/resources/images';

Ext.BLANK_IMAGE_URL = imagePath+'/default/s.gif';

/** 定义中心区域, 本系统的核心区域, 所有打开的Tab都将在该区域展示 */
var centerRegion = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    activeTab:0,
    enableTabScroll:true,
    listeners:{
    remove: function(tp, c){
      c.hide();
    }
    },
    autoDestroy: false,
    items:[welcomePanel]
});

/** 这里是页面展示的开始 */
Ext.onReady(function(){
/** 处理ie提交数据中文乱码问题 */
    Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
        /** 北面板, 定义在 north.js */
        northRegion,
        /** 南面板, 定义在 south.js */
        southRegion,
        /** 西面板, 定义在 west.js */
       westRegion,
       /** 中心面板 ********************************/
          centerRegion
         ]
    });

});

west.js:

/** 收购品种管理子树根 */
var sgpzRoot = new Ext.tree.TreeNode({
id: '01',
text: '管理收购品种',
leaf: false,
cls: 'folder'
});

sgpzRoot.appendChild(new Ext.tree.TreeNode({
id: '001',
text: '品种列表',
leaf: true,
href: "javascript: testFunction();"
}));

sgpzRoot.appendChild(new Ext.tree.TreeNode({
id: '002',
text: '添加品种',
leaf: true,
href: 'javascript: testFunction();'
}));

manageRoot.appendChild(sgpzRoot);

/**<预留的备用代码> */
manageRoot.appendChild(new Ext.tree.TreeNode({
id: '11',
text: '上传xml',
leaf: true,
href: 'javascript: testFunction();'
}));

manageRoot.appendChild(new Ext.tree.TreeNode({
id: '21',
text: '收购信息',
leaf: true,
href: 'javascript: testFunction();'
}));

/** 公司信息管理树根 */
var manageCompanyRoot = new Ext.tree.TreeNode({
id: '03',
text: '管理公司信息',
leaf: false,
cls: 'folder'
});

manageCompanyRoot.appendChild(new Ext.tree.TreeNode({
id: '031',
text: '查询公司信息',
leaf: true,
href: 'javascript: testFunction();'
}));

manageCompanyRoot.appendChild(new Ext.tree.TreeNode({
id: '032',
text: '添加公司',
leaf: true,
href: 'javascript: testFunction();'
}));

manageRoot.appendChild(manageCompanyRoot);

manageTree.setRootNode(manageRoot);

//定义并构造西部面板
var westRegion = {
    region:'west',
    id:'west-panel',
    iconCls: 'tabs',
    title:'客户管理',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    layout:'column',
    layoutConfig:{
        animate:true
    },
    items: [
        {

        items:manageTree
        },
        {
        items:msgTree
        }

        //manageTree
    ]
};

--------------begin layout.js ------------------------------------------------------------------------------------------------

//本例演示怎么使用border布局把一个区域划分为上下两部分.

Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var button = Ext.get('show-btn');
    button.on('click', function(){
        // tabs for the center
        var tabs = new Ext.TabPanel({
           //如果你用border布局, 则子元素必须设置region来确定他们各自的位置
            region    : 'center',
            margins   : '3 3 3 0',
            activeTab : 0,
            defaults : {
        autoScroll : true
      },
            items     : [{
                title    : 'Bogus Tab',
                html     : Ext.example.bogusMarkup
             },{
                title    : 'Another Tab',
                html     : Ext.example.bogusMarkup
             },{
                title    : 'Closable Tab',
                html     : Ext.example.bogusMarkup,
                closable : true
            }]
        });

        // Panel for the west
        var nav = new Ext.Panel({
            title       : 'Navigation',
            //如果你用border布局, 则子元素必须设置region来确定他们各自的位置
            region      : 'north',
            split       : true,
            height      : 200,
            collapsible : true,
            margins     : '3 0 3 3',
            cmargins    : '3 3 3 3'
        });

        var win = new Ext.Window({
            title    : 'Layout Window',
            closable : true,
            width    : 600,
            height   : 650,
            plain    : true,
            //设置border布局
            layout   : 'border',
            items    : [nav, tabs]
        });

        win.show(button);
    });
    //Ext.state.Manager.set('mykey1', 'this is my key');
    //alert(Ext.state.Manager.get('mykey1', 'norecord'));
});

-------------- end layout.js --------------------------------------------------------------------------------------------------