常规功能和模块自定义系统 (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自动生成的工程中我所知道的东西都简略的写出来，如有遗漏或不足之处，请跟贴指出。
对本系统有兴趣的读者可以加入QQ群：386100815；对此系统有任何建议或意见的可以跟贴回复，或者发邮件[email protected] 和我进行联系。
版权声明：本文为博主原创文章，未经博主允许不得转载。