ExtJS ref属性之应用

开发ExtJS应用组件之间引用是个一个比较麻烦的事情。比如在一个FormPanel的底部工具条的某个按钮的事件处理函数中引用form的某个field基本上有两方法：

 

1. 为每个field赋予一个ID，然后用Ext.getCmp(ID)
2. 从用findParentByType找到FormPanel然后再用get()根据field出现的顺序去找form field

 方法1虽然很简单，很容易实现，但这样的form不能复用。方法2比较麻烦，而且如果form的layout改变了或者有新的字段，那么引用代码需要重写。

 

 针对这种情况，ExtJS推出了ref配置属性，凡是component都可以使用该属性在它的归属容器及归属容器的父节点中注入一个对该属性的引用名称。有了该引用名，和该组件有共同父节点的组件就可以比较方便的引用该组件。

以下示例摘自ExtJS官方文档：

 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

 这个例子中定义了一个可编辑的网格面板，该面板的afteredit事件处理程序需要引用顶部工具栏上的“Save"按钮。如果不用ref配置属性来解决引用问题的话，根据上文提到的两个方法，要么给Save按钮一个唯一标识，然后再afteredit事件处理函数中用Ext.getCmp()获得对该按钮的引用，要么用以下代码：

 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.getTopToolbar().get(0).enable();
        }
    }
});

 这个方法不太理想，当layout发生变化时需要修改get()的索引。比如在Save按钮前加入一个分隔符，那么get(0)需要改成get(1):

 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [ '-', {
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.getTopToolbar().get(1).enable();
        }
    }
});