本文共 1364 字，大约阅读时间需要 4 分钟。

最近一直在学习ExtJs的使用，公司项目的前端框架使用的ExtJS4.2框架，ExtJs有自己的MVC结构，分为Controller,view,model,store,在整体的MVC架构中将view层又一次进行解耦，

这两天学习的模块是ATM的分类和型号模块，涉及到增删改查操作。开发流程大致如下：

首先会定义一个controller，如atmType.js，atmBrand.js等等

1、在controller层会指定要显示的视图层view，这个view一般是个大框架，view再次组装别的view组件

2、view分为上下两个部分，上面为一个查询条件的filterform，下面是一个显示数据的grid表格，所以在view层会分别引用filterform和grid组件，而这两个组件分别会在同文件夹或者在父类的view 中

3、在我们的filterform中,涉及到下拉选择的设置框一般都是一个combox，而这个combox一般放在filed文件夹中， 其他的一些编辑框中的属性也会在field中定义好，比如name,address，然后使用的时候要在requries中声明， 类似这种; requires: [           'x.view.field.atmType.Name',           'x.view.field.atmType.TypeStatusComboBox',           'x.view.field.atmType.DeviceAtmCatalogComboBox',           'x.view.field.atmType.DeviceAtmVendorForTypeComboBox'],    4、在执行添加或者更新操作时，我们也是要弹出一个对话框的，这时使用的form也是会在view的同等级文件夹中 form涉及到combox（下拉选择框）也是在filed中定义，使用的时候直接xtype引用就好了。 不同的模块对应不同form，所以在整体的view的js文件中定义formconfig就会选择不同的form,比如： 这是ATM型号的form formConfig : { form : 'x.view.machine.atmType.Form', xtype : 'machine_atmType_form', height: 350, title : 'ATM型号信息' }, 这是品牌的form: formConfig : { form : x.view.machine.atmBrand.Form', xtype : 'machine_atmBrand_form', width: 500, height:300, title : 'ATM品牌信息' }, 因为他们都是直接调用父类的方法，父类需要根据提供的formConfig.xtype来识别不同的form，以对应属性信息 父类中会有： var win=Ext.create('xxx.view.base.Window',{ layout:'fit', title:title, maximizable:true, width:500, height:500, items:[{ xtype:this.formConfig.xtype }]  }); 根据这个创建添加或者更新窗口。

转载地址：https://blog.csdn.net/LM891108647/article/details/76240585 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！