Ext4的MVC结构如何抽取公用组件-优快云博客

本文介绍如何在ExtJS中配置搜索组件，包括设置Form的ID为searchForm，定义CommonController来管理搜索条件的选择与加载，以及如何通过回调函数实现搜索条件的重载。


Ext.define("Component.controller.CommonController", {
    extend: 'Ext.app.Controller',
    refs:[
        //搜索Form的ID需要是searchForm 
        { ref : 'searchForm', selector: '#searchForm'}
    ],
    selectQueryCondition : function (comboxName) {
        var combobox = this.getSearchForm().getForm().findField(comboxName);
        var comboboxStore = combobox.getStore();
        comboboxStore.load({
            scope: this,
            callback: function(records, operation, success) {
                combobox.select(comboboxStore.getAt(0));
                var searchForm = this.getSearchForm().getForm();
                //需要子类继承并实现
                this.reloadBySearchCondition(searchForm.getValues());
            }
        });
    },
    getCurrentItemCombobox : function(comboxName) {
        var queryComBoBox = this.getSearchForm().getForm().findField(comboxName);
        if (queryComBoBox != null) {
          return queryComBoBox.store.findRecord("code", queryComBoBox.getValue());
        }
    }
})

注重细节，注重命名约定，注意方法的继承和使用，如果需要继承这个Controller,需要在html文件中引用这个js文件，并在app.js中加入：


   paths:{
      Component : '../../Component.app/'
   }