ExtJS 一些命名规范（非官方）

类名规范

1、除了包名和最后的文件名 是 首字母大写的 驼峰命名，中间的文件夹小写
比如

Task.view.xxx.yyy.log.Home
Task.view.xxx.yyy.log.HomeController
Task.view.xxx.yyy.log.Edit
Task.view.xxx.yyy.log.EditController

2、没必要文件名带着业务名称，可以

• 按照业务名称分文件夹

Task.view.xxx.yyy.log.LogHome -> Task.view.xxx.yyy.log.Home
Task.view.xxx.yyy.log.LogHomeController -> Task.view.xxx.yyy.log.HomeController

• 或者干脆不分文件夹（业务多的话，不推荐这样混在一起）

Task.view.xxx.yyy.log.LogHome -> Task.view.xxx.yyy.LogHome
Task.view.xxx.yyy.manage.ManageHome -> Task.view.xxx.yyy.ManageHome

3、View 自己用的 自定义组件
可以再 View 所在目录下建个 widget 文件夹
自定义组件放在这个 widget 里面
比如

Task.view.xxx.yyy.log.Home
Task.view.xxx.yyy.log.widget.TopBar
Task.view.xxx.yyy.log.widget.FilterPanel

xtype/alias 命名规范

1、全小写，不要用驼峰命名
多个单词全小写如果看不清，可以用下划线分割
比如

xtype: 'taskloghome'
xtype: 'task_log_home'

不要写

xtype: 'taskLogHome'

2、限制模块（包），防止全局冲突

xtype: 'task_log_home'

不要写

xtype: 'log_home'

css 样式规范

1、css 样式类名 不强制命名规范，但是最好用短横线分割单词
比如

.my-log-home {
}

2、限制样式的使用范围，防止冲突
自定义样式一般只某个 View 自己使用，但是与其同级 的 View.scss 在 build 后生成的 css 并不是局部，而是全局的，所以一定要限制其使用范围。

• 要限制所在模块（包）

.task-log-home {
}

不要

.log-home { }

万一别人也取了一个 log-home 样式，就冲突了

• 限制所在父容器，不要全局裸露
  假设要覆写 某个 grid 的 行样式，首先给这个 grid 加上 userCls: 'task-log-grid'，然后

.x-grid.task-log-grid {
	.x-gridrow {
		// 写你的样式
	}
}
// 或
.task-log-grid {
	.x-gridrow {
		// 写你的样式
	}
}

不要像下面这样裸露着写成全局的

.x-gridrow {
}

变量和函数命名

首字母小写的驼峰命名

var seriesData = 1;

不要

var SeriesData = 1;

其它命名

itemId、reference 不强制 大小写和规范

reference: 'logHome'
reference: 'LogHome'
itemId: 'log_home'
itemId: 'LogHome'