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

最新推荐文章于 2021-06-18 00:35:03 发布

天使没吃饱

最新推荐文章于 2021-06-18 00:35:03 发布

阅读量5k

点赞数

分类专栏： extjs 文章标签： extjs4.2之页面框架搭建 extjs4.2之页面框架搭建完整步骤

本文链接：https://blog.csdn.net/u011493599/article/details/45694479

版权

extjs 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
extjs4.2之页面框架搭建完整步骤（一）

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: 20
复制链接

扫一扫