Extjs4.X--開發后台管理系統--框架搭建

     在實際Ext項目開發中，主框架的搭建是關鍵，下面根據個人經驗做一個簡單的事例！

1.運行主界面如下圖：

2、前台的JS文件，采用Ext4.X提供的MVC框架建立如下目錄結構！

 (1)App.js  應用程序的入口

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled : true
    });
    Ext.application({
        name : 'AM',
        appFolder : 'app',
            launch : function(){
                Ext.create('Ext.container.Viewport',{
                    layout :'fit',    
                    loadMask:{
                        msg : '正在加載，請稍后...'
                    },
                    items :
                    {
                        xtype : 'mainview'
                    }
                });
        },
        controllers : [ 'MainController']
    });
});

(2).MainView.js   主界面

Ext.define('AM.view.MainView',{
    extend:'Ext.panel.Panel',
    alias : 'widget.mainview',
    layout: 'border',
    items: [
    {
        title: '系統標題',
        region: 'north',    
        xtype: 'panel',
        margins:'0 0 5 0',
        tbar:[
            '->',
            '張三,歡迎您!',
            'Date:'+Ext.Date.format(new Date(),'Y-m-d'),
            {
                text:'修改密碼'            
            },
            {
                text:'退出'            
            },
            {
                xtype:'displayfield',
                width:50
            }
            
        ]
    },
    {
        title: '操作菜單',
        region:'west',
        xtype: 'menutree',
        layout:'fit',
         margins:'0 0 1 1',
        split:true,
        width: 180,
        maxWidth:250,
        collapsible: true
    },{
        region: 'center', 
        id:'centerId',
        xtype: 'tabpanel',
        margins:'0 1 1 0',
        layout: 'fit',
        items:[
            {
                title:'主界面',
                padding:10,
                html:'這里是系統簡介!'
            }
        ]
    },{
        title: '系統版本及說明',
        region: 'south',    
        xtype: 'panel',
        split: true   
    }],
    initComponent : function(){
        this.callParent(arguments);
    }
});

(3).MenuView.js   左邊菜單界面

Ext.define('AM.view.MenuView',{
    extend:'Ext.tree.Panel',
    alias : 'widget.menutree',
    store:'MenuStore',
    animate:true,
    rootVisible:false,
    initComponent : function(){
        this.callParent(arguments);
    }
});

(4).MenuModel.js   數據模型

Ext.define('AM.model.MenuModel',{
    extend:'Ext.data.Model',
    fields:['id','text','leaf','iconCls','url']
});

(5).MenuStore.js   數據集

Ext.define('AM.store.MenuStore',{
    extend:'Ext.data.TreeStore',
    fields:['id','text','leaf','href','url','iconCls'],
    proxy: {
         type: 'ajax',
         url: 'Tree/getTreeList.do'
    },
    reader : {
          type : 'json'
    },
    root: {
         text: '樹根',
         id: '00',
         expanded: true
    },
    folderSort: true,
         sorters: [{
            property: 'id',
            direction: 'ASC'
     }]
});

(6).MainController.js   控制器

Ext.define('AM.controller.MainController',{
    extend : 'Ext.app.Controller',
    init : function(){
        var menuTree = null;
        this.control({
            'menutree':{
                render:function(t, eOpts){
                    menuTree = t;
                },
                beforeitemexpand:function(node, eOpts ){
                    Ext.apply(menuTree.getStore().proxy.extraParams,{
                        id:node.data.id
                    });
                },
                itemclick:function(tree, r, item, index, e, eOpts ){
                    /*var root = menuTree.getRootNode();
                    var childNode = root.getChildAt(index);
                    if(childNode.hasChildNodes())
                    {
                        alert('132');
                    }*/
                    if(r.raw.url!=null && r.raw.url!=''){
                    var tblPanel = tree.up('mainview').down('tabpanel[id=centerId]');
                    var panel = Ext.getCmp(r.raw.id);
                    if(!panel){
                        tblPanel.add(
                            {
                                id:r.raw.id,
                                title:r.raw.text,
                                closable:true,
                                iconCls:r.raw.iconCls,
                                html:"<iframe src="+BASEPATH+r.raw.url+" frameborder=0  scrolling='auto' width=100% height=100%></iframe>"
                            }
                        ).show();
                    }else{
                        panel.show();
                    }
                }
                }
            }
        });
    },
    views:[
        'MainView','MenuView'
    ],
    models:[
        'MenuModel'
    ],
    stores:[
        'MenuStore'
    ]
});

 2.左邊菜單使用了動態加載方式，這里使用SpringMVC，在現實中菜單數據因保存在數據庫中，為了省事這里只做模擬即可

package com.phome.spring.action;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.phone.spring.bean.TreeBean;
/**
 * 獲取菜單列表
 * @author lenovo
 *
 */
@Controller
@RequestMapping("/Tree")
public class TreeListAction {
    @RequestMapping("/getTreeList")
    public void getTreeList(HttpServletRequest request,
            HttpServletResponse response,
            @RequestParam(value = "id", required = false) String id) {
        try {
            List<TreeBean> list = null;
            if (id == null || id.equals("00")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("01", "系統設置", false,null));
                list.add(new TreeBean("02", "全局配置", false,null));
                list.add(new TreeBean("03", "商戶管理", false,null));
            } else if (id.equals("01")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0101", "用戶管理", true,"0101"));
                list.add(new TreeBean("0102", "角色管理", true,"0102"));
                list.add(new TreeBean("0103", "日志記錄", true,"0103"));
            } else if (id.equals("02")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0201", "商戶配置", true,"0201"));
                list.add(new TreeBean("0202", "終端配置", true,"0202"));
                list.add(new TreeBean("0203", "其他配置", true,"0203"));
            } else if (id.equals("03")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0301", "商戶管理", true,"0301"));
                list.add(new TreeBean("0302", "指令管理", true,"0302"));
                list.add(new TreeBean("0303", "監控管理", true,"0303"));
            }
            if (list != null) {
                StringBuffer jsonStr = new StringBuffer("[");
                for (TreeBean tree : list) {
                    JSONObject jb = JSONObject.fromObject(tree);
                    jsonStr.append(jb).append(",");
                }
                jsonStr.deleteCharAt(jsonStr.length() - 1);
                jsonStr.append("]");
                response.setCharacterEncoding("utf-8");
                response.getWriter().write(jsonStr.toString());
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}