跟我一起学extjs5(25--模块Form的自己定义的设计[3])

跟我一起学extjs5(25--模块Form的自己定义的设计[3])

自己定义的Form已经能够执行了，以下改一下配置，把Form里面的FieldSet放在Tab之下。改动一下ModuleModel.js中的data下的tf_FormSchemes下的方案，添加一个属性。



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



从理论上说，假设你的Form配置信息设置得合理，能够得到你想要的不论什么样式的Form。但在实际应用的时候，我们仅仅要完毕大部分能自己主动生成就足够了，真正程序中有超级变态复杂的Form结构，能够自己编脚本生成。上面的代码和演示样例仅仅是展示了怎样自己定义一个Form，要能够真正的适用还得做非常多工作，对于刚開始学习的人或者经验还不是非常丰富的程序猿来说，这把这个当成一个拓展视野的样例看看即可了。

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

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方法，是查找本控件的子控件的函数。上例中增加了这种方法之后，就能够保存数据了。