常规功能和模块自定义系统 (cfcmms)—007Extjs的配置文件和自定义ui

　　一、在自动生成的项目中,文件 app.json 是整个前台系统的配置文件，可以在里面增加或修改配置参数来完成相应的功能。该文件的部分参数如下：

{
    "name": "cfcmms",			//项目命名空间
    "version": "1.0.0.0",		//项目版本号
    "indexHtmlPath": "index.html",	//项目主页
    "classpath": [			//源码和类库路径
        "app",
        "${toolkit.name}/src"
    ],
    "overrides": [……],
    "framework": "ext",			//框架库名称
    "toolkit": "classic",		//只有classic的框架
    "theme": "theme-triton",		//界面主题
    "requires": [			//需要使用到的库和功能
        "font-awesome"
    ],
    "sass": {},			//可以被编译到系统中的sass的定义
    "js": [  {				//各个js文件的加载设置
            "path": "app.js",
            "bundle": true  } ],
    "classic": {……},			//classic框架库文件
    "css": [……],			//各个需要加入到系统中的css
     "loader": {			//动态加载文件时的缓存设置
        "cache": false,
         "cacheParam": "_dc"
     },
    "production": {……},		//生成发布包的一些设置
    "development": {  "tags": [] },
    "bootstrap": {……},			//系统引导程序的设置
    "output": {			//各类发布文件的设置
        "base": "${workspace.build.dir}/${build.environment}/${app.name}",
        "appCache": {  "enable": false    }
    },
     "resource": {			//各类其他附加资源文件的定义
        "paths": [
            "resources",
            “${toolkit.name}/resources”]  }
}

　　二、加入国际化的设置，使各种提示信息都使用中文。在app.json中修改requires选项，在里面加入 ext-locale，并加入一个新的选项设置后保存文件，如下所示。

    "requires": [
        "font-awesome",
        "ext-locale"
    ],
    "locale" : “zh_CN”,

　　在浏览器刷新页面后，我们发现提示信息还没改成中文，这是因为bootstrap中的配置信息还没有被更新。在cmd或终端中，在WebContent目录下执行以下命令即可更新系统的metadata(即bootstrap)。

	MacBook:WebContent jiangfeng$ sencha app refresh

　　再启动web服务后，在浏览器中刷新页面即可看到grid的column下的菜单显示中文信息了。

　　三、界面主题：修改主题只需修改app.json中的“theme”参数即可。例如将theme改为经典样式。

"theme": “theme-classic”,

　　在修改了样式以后，需要重新生成系统相应的css文件，由于项目的css文件是在系统发布目录/build/production/cfcmms/resources中，因此在改了主题过后，需要生成发布项目才能重新根据theme的设置来生成css文件。在cmd或终端中，在WebContent目录下执行以下命令即可。

MacBook:WebContent jiangfeng$ sencha app build --clean development 

　　再启动web服务后，在浏览器中刷新页面即可看到界面主题已经修改了。

　　由于主题是根据配置文件的theme定义来进行生成的，因此在使用sencha cmd编译后的项目中如何实现界面主题的自由切换变成了一个新的问题，有知道的可以指点一下。

　　四、通过scss来改变控件的css设置。在自动生成的项目中tabPanel并不是默认的主题中的样式，而是指定了一个ui: ‘navigation’的属性，下面通过一个图简要介绍一下这个属性是如何定义和生效的，具体的内容请参阅sencha官方文档。

　　在下图的说明中，修改了二个设置，将选中标签页的背景和panel标题背景进行了修改。保存修改后要执行sencha app build --clean development 命令来重新生成css后才能正确在浏览器中展示。

　五、项目发布产品：在使用 sencha app build 命令后，会在build/production 目录下生成可发布的前台js和css的优化和压缩后的文件。其中的app.js是所有用到的extjs框架库中的类和自己编的源文件的集合，这样在系统加载时会一次性的加载所有的js文件，第二次使用的时候将会使用缓存。在resources目录中则保存了所有的css、字体、图像等资源文件。

　　如要运行此项目的发布产品可以在浏览器中打入如下地址：http://localhost:1841/build/production/cfcmms/

　　至此，一个由sencha cmd自动生成的工程中我所知道的东西都简略的写出来，如有遗漏或不足之处，请跟贴指出。

版权声明：本文为博主原创文章，未经博主允许不得转载。