24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]
2015-11-26 11:00
507 查看
自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下。修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性。
上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面。
从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form。但在实际应用的时候,我们只要完成大部分能自动生成就足够了,真正程序中有超级变态复杂的Form结构,可以自己编脚本生成。上面的代码和示例只是展示了如何自定义一个Form,要能够真正的适用还得做很多工作,对于初学者或者经验还不是很丰富的程序员来说,这把这个当成一个拓展视野的例子看看就行了。
上面是一个编辑的窗口,数据编辑了以后要保存回model中,这个保存没有用到MVVM特性,我直接写在BaseForm.js中的按钮控件里了。
一个Form在用loadRecord(model)函数从model中调用数据后,可以用getRecord()来返回model,在数据修改了以后可以直接用updateRecord()来用form中的值更新到model中。
在保存的handler中执行了这条语句:button.up('form').getForm().updateRecord();
给初学者讲一下,button.up('form'),就是从这个button的第一个父容器开始一直往上递归,直到找到form为止,这是一个非常好的根据控件找到另一个控件的办法,建立大家都用这种方法来查找控件,不要用getCmp(id) 的这种直接查找的方式。与up对应的还有一个down方法,是查找本控件的子控件的函数。上例中加入了这个方法之后,就可以保存数据了。
上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面。
从理论上说,如果你的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方法,是查找本控件的子控件的函数。上例中加入了这个方法之后,就可以保存数据了。
相关文章推荐
- js原生函数bind
- 23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]
- 22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]
- Chrome开发者工具之JavaScript内存分析
- javascript之url转义escape()、encodeURI()和decodeURI()
- 21、手把手教你Extjs5(二十一)模块Form的自定义的设计
- iframe 用 JavaScript 调取父页面的对象
- 20、手把手教你Extjs5(二十)模块Grid的多列表方案
- 19、手把手教你Extjs5(十九)模块Grid的其他功能的设想
- 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增
- 17、手把手教你Extjs5(十七)模块的新增、修改、删除操作
- 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
- 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
- 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块
- 11、手把手教你Extjs5(十一)模块界面的总体设计
- 10、手把手教你Extjs5(十)自定义模块的设计
- 8、手把手教你Extjs5(八)自定义菜单2
- 7、手把手教你Extjs5(七)自定义菜单1