ExtJs 实现表单联动

最近做的项目使用Extjs。遇到表单联动的业务。下面来说说主要实现思想：

说明：表单联动一般存在从属关系，有大范围的对象和大范围中的小对象。比如地理位置的选定（例：浙江省-杭州市-某某县）。在这里，我将大范围的对象称为包含对象，大范围中的小对象称为被包含对象。

表单联动针对ComboBox（组合框）。在实现时，将包含对象传入被包含对象中，在后台查询被包含对象时，使用传入的包含对象的某个值（一般为被包含对象的外键）作为condition，查询与其相关的被包含对象。实现指定的被包含对象查询。

还有一点注意的是：在将大范围对象传入小对象后，使用js的监听机制，监听当小对象（组合框）要expand（展开）时，加载与其大范围对象相关的所有小对象。这里通过一个大范围对象的某个参数作为查询小对象的条件。两个对象一般存在外键关联的关系。

实例化表单的代码

var chejianObject = new ChejianBox("所属车间","chejianId"); //实例化车间
var banzuObject = new BanzuBox("班组","emp.banzuId",chejianObject); //实例化班组
banzuObject.on('expand', function(comboBox){
    var chejianId = Ext.getCmp("chejianValue所属车间").getValue();
    this.getStore().load({
        params: {
	    chejianId: chejianId
	}
    });
});

定义表单的代码

//班组定义
BanzuBox = Ext.extend(Ext.form.ComboBox,{
    constructor: function(labelName,hiddenName, chejianObject){
        //与部门表进行级联操作
	chejianObject.on('select', function(comboBox){
	    var value = comboBox.getValue();
	    Ext.getCmp('banzuValue'+labelName).setRawValue('');
	    banzuStore.reload({
                params: {chejianId: value}
	    });
	});
	BanzuBox.superclass.constructor.call(this,{
	    id: 'banzuValue'+labelName,
	    fieldLabel: labelName,
	    displayField: 'banzuName',
	    valueField: 'banzuId',
	    hiddenName: hiddenName,
	    width: 100,
	    emptyText: '请选择',
	    height: 100,
	    store: banzuStore,
	    triggerAction: 'all', //显示所有
	    editable: false,
	    allowBlank: false,
	    msgTarget: 'side',
	    blankText: '请选择'
	});
    }
});
//车间定义
ChejianBox = Ext.extend(Ext.form.ComboBox,{
    chejianStore: null,
    //注意传入参数labelName，因为其作id的一部分，避免出现相同的id
    constructor: function(labelName, hiddenName){
        chejianStore = new Ext.data.JsonStore({
	    autoLoad: true, //设为自动加载，以便实现修改时选中某值
	    url:'chejian_show.action',
		fields: ['chejianId','chejianName']
	    });
	ChejianBox.superclass.constructor.call(this,{
	    id: 'chejianValue'+labelName,
	    fieldLabel: labelName,
	    displayField: 'chejianName',
	    valueField: 'chejianId',
	    emptyText: '请选择',
	    hiddenName: hiddenName,
	    width: 100,
	    store: chejianStore,
	    triggerAction: 'all', //显示所有
	    editable: false,
	    allowBlank: false,
	    msgTarget: 'side',
	    blankText: '请选择'
	});
    }
});