24、手把手教你Extjs5（二十四）模块Form的自定义的设计[3]

自定义的Form已经可以运行了，下面改一下配置，把Form里面的FieldSet放在Tab之下。修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案，增加一个属性。

m0xekoko

上面设置好了以后，可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面。

t5oadcal

从理论上说，如果你的Form配置信息设置得合理，可以得到你想要的任何样式的Form。但在实际应用的时候，我们只要完成大部分能自动生成就足够了，真正程序中有超级变态复杂的Form结构，可以自己编脚本生成。上面的代码和示例只是展示了如何自定义一个Form，要能够真正的适用还得做很多工作，对于初学者或者经验还不是很丰富的程序员来说，这把这个当成一个拓展视野的例子看看就行了。

上面是一个编辑的窗口，数据编辑了以后要保存回model中，这个保存没有用到MVVM特性，我直接写在BaseForm.js中的按钮控件里了。

this.buttons.push({
    text: '保存',
    itemId: 'save',
    glyph: 0xf0c7,
    handler: function (button) {
        button.up('form').getForm().updateRecord();
    }
}, {
    text: '关闭',
    itemId: 'close',
    glyph: 0xf148,
    handler: function (button) {
        button.up('window').hide();
    }
});

一个Form在用loadRecord(model)函数从model中调用数据后，可以用getRecord()来返回model，在数据修改了以后可以直接用updateRecord()来用form中的值更新到model中。

在保存的handler中执行了这条语句：button.up('form').getForm().updateRecord();

给初学者讲一下，button.up('form')，就是从这个button的第一个父容器开始一直往上递归，直到找到form为止，这是一个非常好的根据控件找到另一个控件的办法，建立大家都用这种方法来查找控件，不要用getCmp(id) 的这种直接查找的方式。与up对应的还有一个down方法，是查找本控件的子控件的函数。上例中加入了这个方法之后，就可以保存数据了。

cvygtawm