1、我们这个项目用MVC控制我们的index.jsp页面,创建完相关文件后结构如下:
2、app.js作为我们单个页面的资源文件引进index.jsp中,然后在app.js文件中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
!!!!记住开启动态加载,ext默认是不开启的,否则extjs无法识别MVC模式,既找不到我们定义的类和方法。
app.js中appFolder为我们MVC模式的根文件夹,name为它的别名,我们在项目中用name别名,我门定义的类以此别名开头,如MVC.controller.MVCS,那么我门如果在app.js中用controller['MVCS']属性,extjs就会动态的到mvc文件夹下的controller文件夹找到MVCS文件,并加载。
3、我门在controller中创建controller文件,controller文件用来控制我们页面的事件,包括数据请求,响应事件等,当前先保证controller类可以呗找到,添加如下代码:
Ext.define(
'MVC.controller.MVCS'
, {
extend:
'Ext.app.Controller'
,
init:
function
() {
console.log(
'测试controller文件是否找到!'
);
}
});
|
我们打开开发工具,controller会输出一条语句,如果我们看到了表明我们的MVC创建成功了。
4、部署项目,启动浏览:效果如下:
我们的controller已经起作用了,在其中写我们的控制方法就可以实现控制我们页面,下一篇写一下controller中的一些方法。
PS:view层和modal层也是通过这种方式融入到我们的代码中。