extjs4.2之页面框架搭建完整步骤（一）

来源：互联网发布：伊斯兰教法软件编辑：程序博客网时间：2024/04/28 07:50

1、项目整体

2、先将extjs添加到web下，然后在web下创建app文件夹，在app文件夹下创建controller,model,view文件夹

3、index.jsp为登陆页面，成功后跳转到extjs.jsp，exjts.jsp导入extjs需要的css和js文件

<%--  Created by IntelliJ IDEA.  User: gj.hu  Date: 2015/5/13  Time: 10:01  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>后台管理</title>  <link rel="stylesheet" type="text/css" href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css"/>  <link rel="stylesheet" type="text/css" href="resources/Workbench-all.css"/>  <script type="text/javascript" src="extjs/bootstrap.js"></script>  <script type="text/javascript" src="test.js"></script></head><body></body></html>

4,、在web文件夹下创建test.js

Ext.application({    name: 'RCP',    appFolder: 'app',//app为上面创建的app文件夹名字，可修改为其他的    requires: [        'Ext.state.CookieProvider',        'Ext.window.MessageBox',        'Ext.tip.QuickTipManager'    ],    controllers: [        'Test'    //controller    ],    autoCreateViewport: true//为true时，默认加载view文件夹下的viewport.js});

5、在controller文件夹下创建Test.js

Ext.define('RCP.controller.Test',{    extend:'Ext.app.Controller',    requests:[        'Ext.window.Window'    ],    refs: [        {            ref: 'viewport',            selector: 'viewport'        },{    ref: 'navigation',    selector: 'navigation'},{    ref: 'contentPanel',    selector: 'contentPanel'}
    ]});
6、在view文件夹下创建viewport.js

Ext.define('RCP.view.Viewport',{    extend:'Ext.container.Viewport',    requires:[        'Ext.tab.Panel',        'Ext.layout.container.Border',        'RCP.view.Header',       //添加Header.js        'RCP.view.Navigation',  //添加Navigation.js        'RCP.view.ContentPanel' //添加ContenPanel.js    ],    layout:'border',    items:[        {            region:'north',            xtype:'appHeader'   //Header.js别名        },        {            region: 'west',            xtype: 'navigation',  //Navigation.js别名            width: 250,            minWidth: 100,            height: 200,            split: true,            stateful: true,            stateId: 'mainnav.west',            collapsible: true,            tools: [{                type: 'gear',                regionTool: true            }]        },        {            region: 'center',            xtype: 'contentPanel'   //ContentPanel.js别名        }    ]});
7、在view下创建Header.js

Ext.define('RCP.view.Header',{    extend:'Ext.Container',    alias:'widget.appHeader',    id:'app-header',    height:52,    layout:{        type:'hbox',        align:'middle'    },    initComponent: function () {        this.items = [            {                xtype: 'component',                id: 'app-header-title',                html: '后台管理系统',                flex: 1            },            {                xtype: 'button',                text: '退出',                handler: function () {//                    Ext.MessageBox.confirm('系统', '退出确认？', function (btn) {//                        if (btn == 'yes') {                    Ext.Ajax.request({                        url: 'user/loginOut.action',                        success: function (response, action) {                            location.reload();                        }                    });//                        }//                    });                }            }        ];        this.callParent();    }});
8、在view下创建Navigation.js

Ext.define('RCP.view.Navigation', {    extend: 'Ext.tree.Panel',    alias: 'widget.navigation',    title: '功能导航',    rootVisible: false,//如果设置为true会显示root根目录，如最下面的图片，false则不显示    lines: false,    useArrows: true, //-------------------------从后台读取菜单-------------------------------------------------------------------  /*  initComponent: function () {        Ext.apply(this, {            store: new Ext.data.TreeStore({                proxy: {                    type: 'ajax',                    url: 'program/selectNodes.action',                    reader: {                        type: 'json',                        root: 'nodes',                        record: ''                    } ,                    root:this.text                },                root: {                    text: '功能菜单',                    id: 'root',                    expanded: true                },                folderSort: true,                sorters: [                    {                        property: 'indexes',                        direction: 'ASC'                    }                ]            }),            viewConfig: {                plugins: {                    ptype: 'treeviewdragdrop',                    containerScroll: true                }            }        });        this.callParent();    }*/
//-----------------------------------从后台读取菜单-------------------------------------------------------------
//-----------------------------------在页面写好菜单-------------------------------------------------------------    root: {        expanded: true,        children: [                        {                text: '员工信息管理',                expanded: true,                children: [                    { id: 'staffList', text: '员工信息维护', leaf: true }                ]            },            {                text: '系统管理',                expanded: true,                children: [                    { id: 'usersList', text: '用户管理', leaf: true },                    { id: 'programList', text: '功能管理', leaf: true },                    { id: 'roleList', text: '角色管理', leaf: true }                ]            }        ]    }});
9、在view下创建ContentPanel.js
Ext.define('RCP.view.ContentPanel', {    extend: 'Ext.panel.Panel',    alias: 'widget.contentPanel',    id: 'content-panel',    title: '&nbsp;',    layout: 'fit',    autoScroll: false});
10、系统页面完成了，运行后的页面如图：

0 0