ExtJS4搭建后台框架遇到点问题

vnetoolxw 发布于 2014/03/15 16:44
阅读 821
收藏 0

【领华为电脑包】容器化时代到来!跳转机分配问题终于“有救”了!>>>

采用ExtJS4.x的MVC架构组织的,可惜一直提示js错误,特来求助:

我的代码如下:

app.js

Ext.QuickTips.init();
Ext.Loader.setConfig({
	enabled : true
});

Ext.Loader.setPath({
	'Ext.ux' : 'extjs4/ux',
	'Ext.app' : 'extjs4/app',
	'OA.util' : 'app/util'
});

/**
 * 加载ExtJS插件文件
 */
Ext.require(
	[
		'Ext.app.Portlet',
		'Ext.app.PortalColumn',
		'Ext.app.PortalPanel',
		'Ext.app.PortalDropZone',
		'Ext.app.GridPortlet',
		'Ext.app.ChartPortlet',
		'Ext.ux.TabReorderer',
		'Ext.ux.BoxReorderer',
		'Ext.ux.TabCloseMenu',
		'Ext.ux.PageSizePaging',
		'OA.util.AppUtil'
	]
);
Ext.application({
    requires: ['Ext.container.Viewport','OA.view.Viewport'],
    //项目名称简称
    name: 'OA',
    appFolder: 'app',
    //控制器注册
    controllers:[
        'AppController'
    ],
    launch: function() {
        Ext.create('OA.view.Viewport');
    }
});
AppController.js


/*******************全局应用程序控制器类******************/

//首先载入工具类
Ext.require(
	[
		'OA.util.CommonDoActionUtil'
	]
);

Ext.define('OA.controller.AppController', {
	extend: 'Ext.app.Controller',
	requires: ['OA.util.CommonDoActionUtil'],
    //数据模型注册
    models: [
        'TreeModel'
    ],
    //视图注册
    views: [
        'Viewport',
        'TopPanel',
        'BottomPanel',
        'LeftPanel',
        'CenterPanel',
        'MainPanel',
        'ThemeMenu',
        'LeftTreePanel'
    ],
    //数据源注册
    stores: [
        'TreeStore'
    ],
    init: function() {
    	this.control({
    		"leftpanel" : {
    		    afterrender : function(){  
		            Ext.getBody().mask('正在加载系统菜单,请稍候....');  
		            alert(OA.util.AppUtil.basePath);
		            OA.util.AppUtil.ajax({  
		                url : OA.util.AppUtil.basePath + "TreePanelServlet", 
		                callback : function(data) {OA.util.AppUtil.addTreePanel(data,this);}  
		            });  
		        }  
    		},
    		"lefttreepanel" : {
    			afterlayout : function() {  
                    if (this.getView().el) {  
                        var el = this.getView().el;  
                        var table = el.down("table.x-grid-table");  
                        if (table) {  
                            table.setWidth(el.getWidth());  
                        }  
                    }  
                },
                itemclick : function(view,node){
                	openPanel(node,"centerPanel");
                }
    		}
    	});
    	this.commonAction = Ext.create('OA.util.CommonDoActionUtil');
    }
});



Viewport.js
/*********************全局视图容器类************************/
Ext.define("OA.view.Viewport",{
    extend:'Ext.container.Viewport',
    requires:['Ext.container.Viewport','OA.view.MainPanel'],
    alias : 'widget.baseviewport',
    alternateClassName: ["OA.Viewport"],
    layout: 'fit',
    loadMask:{msg : '正在加载,请稍候...'},
    items: [
    	{
    		xtype: 'mainpanel'
    	}
    ]
});



TopPanel.js
/**********************顶部Panel***********************/
Ext.define("OA.view.TopPanel",{
    extend:'Ext.panel.Panel',
    requires:["OA.view.ThemeMenu"],
    alias : 'widget.toppanel',
    alternateClassName: ["OA.TopPanel"],
    height: 80,
    split: true,
    border: 0,
    collapsible: true,
    titleCollapse: true,
    collapseMode: 'mini',
    region: 'north',
    initComponent : function(config) {
        var me = this;
        me.callParent(config);
    },
    items: [
	    {
	    	title: 'OA管理系统',   
	        xtype: 'panel',
	        margins:'0 0 5 0',
	        tbar:[
	            '->',
	            'xx,欢迎您!',
	            new Date().format("yyyy年MM月dd日    hh🇲🇲ss  w"),
	            {
	                text:'修改密码'            
	            },
	            {
	                text:'退出'            
	            },
	            {
	                text: '换肤',
            		//iconCls: 'theme',
            		menu: {xtype: 'thememenu'}
	            }
	       ]
	    }
    ]
});



BottomPanel.js
/**********************底部Panel***********************/
Ext.define("OA.view.BottomPanel",{
    extend:'Ext.panel.Panel',
    alias : 'widget.bottompanel',
    alternateClassName: ["OA.BottomPanel"],
    height: 80,
    border: 0,
    split: true,
    collapsible: true,
    titleCollapse: true,
    collapseMode: 'mini',
    region: 'south',
    initComponent: function () {
    	var me = this;
    	var is = me.buildItems();
    	Ext.apply(me, {
            items: [is]
        });
    	me.callParent(arguments);
    },
    buildItems: function() {
    	return '->','OA System V1.0 @ Copyright (C) 2012 by yida'
    }
});



LeftPanel.js
/*********************左侧Panel************************/
Ext.define("OA.view.LeftPanel",{
    extend:'Ext.panel.Panel',
    requires:["OA.view.LeftTreePanel"],
    alias : 'widget.leftpanel',
    alternateClassName: ["OA.LeftPanel"],
    id : "leftPanel",
    title: '导航菜单',
    width: 200,
    border: 0,
    collapsible: true,
    animCollapse: true,
    collapseMode: 'mini',
    autoScroll: false,
    split: true,
    region: 'west',
    initComponent : function(config) {
        var me = this;
        me.callParent(arguments);
    },
    layout: 'accordion'
});



CenterPanel.js
/*******************中间Panel**************************/
Ext.define("OA.view.CenterPanel",{
    extend:'Ext.tab.Panel',
    requires:['Ext.tab.Panel'],
    alias : 'widget.centerpanel',
    alternateClassName: ["OA.CenterPanel"],
    id : "centerPanel",
    width: '100%',
    border: 0,
    enableTabScroll: true,
    autoScroll: true,
    activeItem: 0,
    region: 'center',
    layout: 'fit',
    initComponent : function(config) {
        var me = this;
        me.callParent(config);
    },
    items: [
        {  
            //iconCls : 'icon-activity',  
            title : '平台首页',  
            xtype:'portalpanel',  
            layout:'column',  
            items : [
            	{  
                    xtype : 'portalcolumn',  
                    columnWidth : 0.7,  
                    items:[
                    	{title: '新闻动态',height : 150},  
                        {title: '最新通知',height : 150},  
                        {title: '业绩报表',height : 150}
                    ]  
                },
                {  
                    xtype : 'portalcolumn',  
                    columnWidth : 0.3,
                    items:[
                    	{title: '常用功能', height : 150},  
                        {title: '待办事项',height : 150},  
                        {title: '邮件列表', height : 150}
                    ]  
                }
            ]  
        }
    ],
    plugins: [
    	{
    		xtype: 'tabreorderer'
    	},
    	{
    	    xtype: 'tabclosemenu',
    	    closeTabText: '关闭面板',  
            closeOthersTabsText: '关闭其他',  
            closeAllTabsText: '关闭所有'  
    	}
    ]  
});



MainPanel.js
Ext.define("OA.view.MainPanel",{
    extend:'Ext.panel.Panel',
    alias : 'widget.mainpanel',
    alternateClassName: ["OA.MainPanel"],
    requires: ['OA.view.TopPanel','OA.view.BottomPanel','OA.view.LeftPanel','OA.view.CenterPanel'],
    layout: 'border',
    border: 0,
    initComponent: function () {
        this.buildTop();
        this.buildBottom();
        this.buildLeft();
        this.buildCenter();
        Ext.apply(this, {
            items: [
                this.topPanel,
                this.bottomPanel,
                this.leftPanel,
                this.centerPanel
            ]
        });
        this.callParent(arguments);
    },
    buildTop: function () {
        this.topPanel = Ext.create('OA.view.TopPanel');
    },
    buildBottom: function () {
        this.bottomPanel = Ext.create('OA.view.BottomPanel');
    },
    buildLeft: function () {
        this.leftPanel = Ext.create('OA.view.LeftPanel');
    },
    buildCenter: function () {
        this.centerPanel = Ext.create('OA.view.CenterPanel');
    }
});
ThemeMenu.js


/*************************主题菜单*************************/
Ext.define("OA.view.ThemeMenu",{
    extend: 'Ext.menu.Menu',
    alias: 'widget.thememenu',
    items: [
        '-',
        {
        	text: '主题皮肤',
        	menu: {
        	    items:[
        	        {
                        id:'Skin-Default',
                        xtype: 'menucheckitem',
                        text: '默认',
                        checked: false,
                        group: 'theme'
                    },'-', {
                        id: 'Skin-Gray',
                        xtype: 'menucheckitem',
                        text: '灰色',
                        checked: false,
                        group: 'theme'
                    }, '-', {
                        id: 'Skin-Access',
                        xtype: 'menucheckitem',
                        text: 'Access',
                        checked: false,
                        group: 'theme'
                    }
        	    ]
        	}
        }
    ]
});



LeftTreePanel.js
/**********************ExtJS左侧树型面板类****************************/
Ext.define("OA.view.LeftTreePanel",{
    extend:'Ext.tree.Panel',
    requires:['Ext.tree.Panel'],
    alias : 'widget.lefttreepanel',
    alternateClassName: ["OA.LeftTreePanel"],
    autoScroll : true,  
	rootVisible : false,  
	viewConfig : {  
	    loadingText : "正在加载..."
	},
	store: 'TreeStore'
});



TreeStore.js
/*****************ExtJS Tree数据源类*********************/
Ext.define("OA.store.TreeStore", {
    extend : "Ext.data.TreeStore",  
    model: 'OA.model.TreeModel',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: OA.util.AppUtil.basePath + 'treeNodeListServlet',
        method: 'POST',
        reader: {
            type: 'json'
        },
        nodeParam: "id"
    }
});
TreeModel.js
/*****************ExtJS Tree数据模型类*********************/
Ext.define("OA.model.TreeModel", {
    extend : "Ext.data.Model",  
    fields : [
    	{name : "id",type : "int"},  
        {name : "text",type : "string"},  
        {name : "iconCls",type : "string"},  
        {name : "leaf",type : "boolean"},  
        {name : "expanded",type : "boolean"}, 
        {name : 'type',type: "string"}
    ]
});
TreePanelServlet.java
package com.yida.test;

import java.io.IOException;
import java.io.PrintWriter;

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

public class TreePanelServlet extends HttpServlet {
	private static final long serialVersionUID = 4019783526668564571L;

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("application/json");
		PrintWriter out = response.getWriter();
		out.print("[");
		StringBuffer buffer = new StringBuffer();
		buffer.append("{\"id\":1,\"text\":\"").append("系统管理\",");
		buffer.append("\"type\":\"component\",\"leaf\":false,\"expanded\":true,\"iconCls\":\"\"},");
		
		buffer.append("{\"id\":2,\"text\":\"").append("调度管理\",");
		buffer.append("\"type\":\"component\",\"leaf\":false,\"expanded\":false,\"iconCls\":\"\"}");
		out.print(buffer.toString());
		out.print("]");
		out.flush();
		out.close();
	}
}



TreeNodeListServlet.java
package com.yida.test;

import java.io.IOException;
import java.io.PrintWriter;

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

public class TreeNodeListServlet extends HttpServlet {
	private static final long serialVersionUID = -843875565544999177L;

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		response.setContentType("application/json;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(id.equals("1")) {
			out.print("[");
			StringBuffer buffer = new StringBuffer();
			buffer.append("{\"id\":11,\"text\":\"").append("用户管理\",");
			buffer.append("\"type\":\"component\",\"leaf\":true,\"expanded\":false,\"iconCls\":\"\"},");
			
			buffer.append("{\"id\":22,\"text\":\"").append("角色管理\",");
			buffer.append("\"type\":\"component\",\"leaf\":true,\"expanded\":false,\"iconCls\":\"\"}");
			out.print(buffer.toString());
			out.print("]");
		} else if(id.equals("2")) {
			out.print("[");
			StringBuffer buffer = new StringBuffer();
			buffer.append("{\"id\":33,\"text\":\"").append("任务管理\",");
			buffer.append("\"type\":\"component\",\"leaf\":true,\"expanded\":false,\"iconCls\":\"\"},");
			
			buffer.append("{\"id\":44,\"text\":\"").append("任务计划管理\",");
			buffer.append("\"type\":\"component\",\"leaf\":true,\"expanded\":false,\"iconCls\":\"\"}");
			out.print(buffer.toString());
			out.print("]");
		}
		out.flush();
		out.close();
	}
}



关键代码都贴出来了,知道怎么解决的请回复,谢谢!


加载中
返回顶部
顶部