一个extjs写的主页布局的demo

 

 有一个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:

 
   
 
 
 
  
   
   
   
   
   
   
   
   
   
   
   
 
 
 


 

 

 

 


 

 

 

 

 

 

 

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('技术支持 XXXX信息技术有限公司'),
   {pressed:false,text:'与我们联系',iconCls: 'tabs'}
 ]
 
};

north.js:

 

 

 

 

 

var northRegion = new Ext.Panel({
    region:'north',
    height:60,
    html:"

XX平台协同办公系统 (这里我放了一个div，编辑这个div就可以达到预想的效果)",
   bbar:[  
    {pressed:false,text:'行政办公',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:'tbseparator'},
    {pressed:false,text:'数据通',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:'tbseparator'},
    {pressed:false,text:'客户管理',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:'tbseparator'},
    {pressed:false,text:'人力资源管理',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:'tbseparator'},
    {pressed:false,text:'进销存管理',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:'tbseparator'},
    {pressed:false,text:'客户管理',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:"tbfill"},
    {pressed:false,text:'刷新',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {pressed:false,text:'帮助',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {pressed:false,text:'退出',iconCls: 'tabs', handler: function(){alert('预留function');}},
    {xtype:"combo"} 
  ]
});

 

 

 

---

/** 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';

var tools = [{
    id:'gear',
    handler: function(){
        Ext.Msg.alert('Message', 'This function need to be modified.');
    }
},{
    id:'close',
    handler: function(e, target, panel){
        panel.ownerCt.remove(panel, true);
    }
}];
     
var welcomePanel = new Ext.Panel({
 title: '办公桌面',
 iconCls: 'tabs',
 closable: false,
 layout:'table',
 layoutConfig: {columns:3},
 defaults: {frame:true, width:300, height: 200},
 items:[{
    title:'代办适宜',
    style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'备忘录',
        tools:tools,
        style:'margin: 5px;',
        iconCls: 'tabs'
    },{
        title:'段消息',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'日程安排',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'公告',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'常用网址',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'论坛',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'论坛 5',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    },{
        title:'论坛 5',
        style:'margin: 5px;',
        tools:tools,
        iconCls: 'tabs'
    }]
});

/** 定义中心区域, 本系统的核心区域, 所有打开的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:

 

 

 

 

function testFunction(){
 alert('This function need to be modified.');
}
/** 管理单元面板 */
var manageTree = new Ext.tree.TreePanel( {
    autoScroll: true,
    animate: false,
    enableDD: true,
    containerScroll: true,
    rootVisible: false,
    height:350
});
/** 管理单元树根 */
var manageRoot = new Ext.tree.TreeNode({
 id: '0',
 text: '',
 leaf: false
});

/** 收购品种管理子树根 */
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 msgTree = new Ext.tree.TreePanel( {
   title: '未阅信息',
   iconCls: 'tabs',
    autoScroll: true,
    animate: false,
    enableDD: true,
    containerScroll: true,
    rootVisible: false,
    height:300
});
var msgRoot = new Ext.tree.TreeNode({
 id: '0',
 text: '',
 leaf: false
});
msgRoot.appendChild(new Ext.tree.TreeNode({
 id: '11',
 text: '代办流程',
 leaf: true,
 href: 'javascript: gotoUploadXML();'
}));
msgRoot.appendChild(new Ext.tree.TreeNode({
 id: '11',
 text: '未读消息',
 leaf: true,
 href: 'javascript: gotoUploadXML();'
}));
msgRoot.appendChild(new Ext.tree.TreeNode({
 id: '11',
 text: '今日日程',
 leaf: true,
 href: 'javascript: gotoUploadXML();'
}));
msgTree.setRootNode(msgRoot);

//定义并构造西部面板
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 --------------------------------------------------------------------------------------------------