项目开发中遇到这样一个问题。
某功能中,主表与多个子表关联,形成一个台账界面。其中部分子表为一对一关系,其他为一对多关系。
要求:一对一关系,显示其表单界面(FormPanel),一对多关系,显示列表页面GridPanel。
每个子表数据均为独立的JS文件,使用Ext.ux.ScriptLoader方法,在主表FormPanel中载入,创建对应的子表Panel,使用TabPanel载入显示。
Ext.ux.ScriptLoader('功能模块路径/scripts/子表Panel.js',false);
this.tuProdDayCwPsiLAOEWindow = new TuProdDayCwPsiLAOEWindow( {
tuProdDayCwId : this.tuProdDayCwId,
tuProdDayCwAOEFormPanel : this,
editable : true
});
创建对应的子表Panel对象,然后使用TabPanel,将其载入:
var subTabList = new Ext.TabPanel( {
border : true,
closable : false,
autoHeight : true,
activeTab : 0,
frame : false,
autoScroll : true,
enableTabScroll : true
});
subTabList.add(this.tuProdDayCwPsiLAOEWindow);
如果是列表页面,使用Store根据主表ID载入数据。如果是一对一表单,则使用form.load方法,根据主表ID进行数据查询载入。
问题出现了。当只载入一个子表表单,使用form.load方法载入数据,正常,当在重复以上代码,同时载入另一个表单,则第二个表单数据无法正常载入(数据通过ajax获取已返回)。
如果将第一个载入表单去掉,则第二个表单单独存在的时候,js运行正常无异常。
使用firebug调试,提示该错误:this.form.el is undefined。
百度一下,基本上都是讲到,在使用form.load方法,极容易出现该错误。因为该方法使用表单控件的id进行数据处理。容易发生id冲突,需要修改ext-all文件,改为通过name进行数据处理。
我现在的js中,控件都没有设置ID值。之后全部加上id设置,仍然提示该错误。不知道哪里冲突了。如果不进行form.load方法调用,表单界面能够正常显示。
最后实在没办法,使用了曲线救国的方式,不直接进行form.load进行数据获取装载,而是在主表单里面,使用store进行数据获取,若获取到数据,则将数据以Record类型,直接交给子表表单,使用record进行数据赋值。暂时是解决这个问题而来。
如果不修改ext-all文件(项目的共有文件,肯定不允许我随意更改),有什么解决的方法可以多个表单存在,而且可以分别进行form.load数据装载?
分享到:
相关推荐
在Ext JS中,`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制,这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释: 1...
`Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、...
第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用...
EXT dojochina Ext类实例方法.rar 是一个与EXT JS框架相关的压缩文件,EXT JS是一个广泛使用的JavaScript库...通过实践和深入研究提供的"Ext类实例方法"文件,你可以对EXT JS有更全面的理解,并提升你的前端开发技能。
此外,EXTJS的`Ext.Ajax`对象还提供了其他方法,如`request()`、`load()`等,可以用于更复杂的异步通信需求。在实际开发中,开发者可以根据具体场景灵活运用这些功能,创建出高效、用户体验优秀的Web应用。
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...
var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: '选择项', store: ['选项1', '选项2', '选项3'], displayField: 'text', valueField: 'text', }); ``` 2. **添加或删除选项**: 当需要添加...
表单数据与后端服务的交互通常通过`Ext.form.action.Submit`或`Ext.form.action.Load`进行。 4. **数据存储(Store)**:`Ext.data.Store`是连接数据模型和视图的关键,它负责管理数据加载、更新和同步。在这个例子...
EXT 2.0 Form Demo 知识点详解 EXT是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...
Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox, { // ComboBox configurations store: new Ext.data.JsonStore({ // store configurations }) }); ``` 在这种情况下,尝试使用`Ext...
在Web开发中,Ext JS是一个流行的JavaScript框架,它提供了丰富的UI组件,包括级联下拉框(Combobox)。本篇将深入探讨如何在Ext JS中实现级联下拉框的功能。 首先,我们需要了解Ext JS中的Combobox组件。Combobox...
FormPanel 则用于创建和更新数据,它可以与后台数据库进行数据交换,通过 Form 的 Submit 或 Load 方法实现数据的保存和读取。 **Drag 功能** EXT.NET 1.x 提供了拖放(Drag & Drop)功能,允许用户通过鼠标操作将...
在表单中,每个TextField作为表单的一个字段,可以通过`FormPanel`的`getForm().load()`和`submit()`方法进行数据加载和提交。 6. **示例代码**: 压缩包内的"sample"文件可能包含了创建和使用TextField的示例代码...
无论是用于展示表格数据的Grid,收集用户输入的Form,还是用于导航的Tree,Ext Js都提供了完善的支持和灵活的配置选项,使得开发过程更加便捷。通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令...
在EXT(Ext JS)框架中...在开发过程中,还要注意安全性问题,如防止SQL注入,处理异常情况等。EXT的灵活性和强大的组件库使得这些功能的实现变得相对简单,但背后涉及到的数据库操作和Ajax通信仍然是核心的技术环节。
在Web开发中,ExtJS是一个强大的JavaScript库,用于构建富客户端应用程序。在处理复杂的用户界面时,Panel和IFrame的组合使用是常见的场景。当Panel包含一个IFrame时,可能会遇到页面高度调整的问题,特别是在动态...
#### 二、Ext.form.BasicForm `Ext.form.BasicForm`类提供了一个基础表单的功能,支持表单数据的提交、加载以及简单的数据绑定。 **配置项** - **baseParams**: 默认传递到请求中的参数。 - **method**: 提交方式,...
var provinceComboBox = Ext.create('Ext.form.ComboBox', { store: provincesStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { // 在...