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

小灰灰 2022-08-08 09:13 10阅读 0赞

1、项目整体

![Center][]

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: ' ',
        layout: 'fit',
    
        autoScroll: false });10、系统页面完成了，运行后的页面如图：

[Center]: /images/20220805/b05528b10b404add80b1416af565ec49.png