在开发EXTJs的表单程序时,我们经常需要对FormPanel进行数据编辑的工作,而编辑数据的时候,需要把服务端的数据抓取回来并填充取表单的控件中去以完成数据的回填工作,以便于用户的编辑工作,而EXTJs大部分程序会写成以下的方式。
//formPanel的items如下所示:
{
fieldLabel : '新闻标题',
name : 'news.subject',
width :400,
id : 'subject'
},{
fieldLabel:'桌面新闻',
name:'isDeskImage',
id:'isDeskImage',
xtype:'checkbox',
handler:function(obj){
if(obj.getValue()){
Ext.getCmp('CheckOutImageButton').show();
}else{
Ext.getCmp('CheckOutImageButton').hide();
}
}
//.................
//加载数据
this.formPanel.getForm().load({
deferredRender : false,
url : __ctxPath + '/info/getNews.do?newsId=' + this.newsId,
waitMsg : '正在载入数据...',
success : function(form, action) {
},
failure : function(form, action) {
Ext.ux.Toast.msg('编辑', '载入失败');
}
});
而该url返回的json数据格式如下所示:
{success:true,data:{"author":"csx","content":"<p>国际关系紧张国际关系紧张国际关系紧张国际关系紧张国际关系紧张国际关</p>","createtime":1284706528000,"firstKeyColumnName":"newsId","id":5,"isDeskImage":1,"issuer":"csx","newsId":5,"newsType":{"class":"com.htsoft.oa.model.info.NewsType_$$_javassist_118","sn":3,"typeId":4,"typeName":"国际新闻"},"replyCounts":3,"status":1,"subject":"国际关系紧张","subjectIcon":"info/news/201009/7de72a2ab73e4ced9779a87606d96b1f.jpg","typeId":4,"updateTime":1285482215000,"viewCounts":51}}
使用以上方式存在以下问题:
1.表单控件必须用id,如"subject",表单控件若用id就可能会跟其他控件存在id冲突。
2.用 formPanel.getForm.load()方法自动加载的时候,经常会出现错误“this.form.el is undefined”
鉴于此,我们对加载进行了扩展,如:
Ext.override(Ext.Panel, {
loadData:function(conf){
var ct=this;
//遍历该表单下所有的子项控件,并且为它赋值
var setByName=function(container,data){
var items=container.items;
if(items!=null){
for(var i=0;i<items.getCount();i++){
var comp=items.get(i);
if(comp.items){
setByName(comp,data);
continue;
}
//判断组件的类型,并且根据组件的名称进行json数据的自动匹配
var xtype=comp.getXType();
try{
if(xtype=='textfield' || xtype=='textarea' || xtype=='radio' || xtype=='checkbox'
|| xtype=='datefield' || xtype=='combo' || xtype=='hidden' || xtype=='datetimefield'
||xtype=='htmleditor'
|| xtype=='label' || xtype=='fckeditor'
){
var name=comp.getName();
if(name){
if(conf.preName){
name=name.substring(conf.preName.length+1);
}
var val=eval('data.'+name);
if(val){
comp.setValue(val);
}
}
}
}catch(e){
//alert(e);
}
}
}
};
if (!ct.loadMask) {
ct.loadMask = new Ext.LoadMask(Ext.getBody());
ct.loadMask.show();
}
Ext.Ajax.request({
method:'POST',
url:conf.url,
scope:this,
success:function(response,options){
var json=Ext.util.JSON.decode(response.responseText);
var data=null;
if(conf.root){
data=eval('json.'+conf.root);
}else{
data=json;
}
setByName(ct,data);
if(ct.loadMask){
ct.loadMask.hide();
ct.loadMask = null;
}
if(conf.success){
conf.success.call(ct,response,options);
}
},//end of success
failure:function(response,options){
if(ct.loadMask){
ct.loadMask.hide();
ct.loadMask = null;
}
if(conf.failure){
conf.failure.call(ct,response,options);
}
}
});
}
});
使用方式如下:
this.formPanel.loadData({
root : 'data',
preName:'news',
url : __ctxPath + '/info/getNews.do?newsId=' + this.newsId,
success : function(form, action) {
},
failure : function(form, action) {
Ext.ux.Toast.msg('编辑', '载入失败');
}
});
以上方式就不需要表单的控件使用id,并且效率设值对load的方式要快得多,但对于没有id如何取某个控件的值呢,extjs大部分的api都是按id取值。
我们在container上提供了另一个方法,可以按名称取到控件。
Ext.override(Ext.Container, {
getCmpByName : function(name) {
var getByName = function(container, name) {
var items = container.items;
if (items != null) {
for (var i = 0; i < items.getCount(); i++) {
var comp = items.get(i);
var cp = getByName(comp, name);
if (cp != null)
return cp;
if (comp.getName && name == comp.getName()) {
return comp;
break;
}
}
}
return null;
};
return getByName(this, name);
}
});
分享到:
相关推荐
在ExtJS中,`Ext.form.Panel`(或简称为`formpanel`)是一种非常重要的组件,用于创建表单来收集用户输入的数据。本文将详细介绍两种在ExtJS formpanel中加载数据的方法,以供开发者参考。 ### 方法一:使用`...
3. 自定义数据加载:根据业务需求,重写`loadData`或`load`方法,添加自定义的加载逻辑。 绑定FormPanel和Store是ExtJS中常用的数据展示方式。通过设置`formBind`为true,我们可以让表单的提交按钮根据Store中的...
在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...
例如,给定的部分内容中的示例JSON数据为: ```json { "success": true, "data": { "clientName": "Fred.OlsenLines", "portOfLoading": "FXT", "portOfDischarge": "OSL" } } ``` 这里需要注意的是,JSON...
同时,`loadRecord`方法可以用来从记录对象中加载表单数据,而`getValues`和`getRecord`则用于获取当前表单的值或转换为记录对象。 在工具方面,ExtJS 提供了一些实用的工具类,如`Ext.Ajax`用于处理Ajax请求,`Ext...
7. **最佳实践**:动态操作FormPanel时,应遵循最佳实践,如延迟加载未使用的字段以减少初始加载时间,使用合适的布局管理器优化空间利用,以及确保数据验证和提交逻辑的健壮性。 总结起来,这篇博客内容涵盖了...
通过`bind`方法或`form.loadRecord`方法可以加载和保存数据。 7. **表单验证**: 表单验证是确保用户输入符合预设规则的关键部分。ExtJS提供内置的验证功能,可以在字段级别或表单级别设置验证规则。 在这个案例...
我们可以设置表单的`fields`属性来动态添加或更新字段,这通常基于接收到的JSON数据。 4. **Ext.form.FieldSet**:如果表单数据复杂,可以使用FieldSet来组织字段,FieldSet是一个可折叠的容器,可以包含多个字段。...
Ext JS的`Ext.form.Panel`(formpanel)是一个用于创建表单的组件,它可以包含各种输入控件、标签和其他表单元素。在formpanel中使用table布局,可以按照表格的形式组织表单元素,这在处理多列或多行表单布局时非常...
然后,我们可以在适当的时候为BasicForm设置不同的URL,比如在组件添加到不同容器或触发特定事件时: ```javascript form.url = '../logselectservlet'; // 设置新的URL ``` 这样,每次提交表单时,都会根据当前...
通过以上步骤,我们了解了如何在Ext JS中进行数据添加的完整操作,包括定义模型、创建数据存储、添加数据以及同步到服务器。这个过程对于构建动态的、基于数据的应用程序至关重要。在实际项目中,你可能还会遇到其他...
Store与数据源(如数据库或服务器)连接,可以加载、修改和保存数据。 创建(Create):当用户添加新数据时,可以通过Store的`add()`方法将新记录添加到Store中,然后调用`sync()`方法将数据同步到服务器端。在后台...
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...
FormPanel则用于创建和更新数据,而Store负责数据的存储和检索。 3. 数据模型(Model):EXTJS中的数据模型定义了数据对象的结构和行为,包括字段定义、验证规则等。在进行CRUD操作时,数据模型可以帮助我们更好地...
在实际应用中,我们通常使用Grid Panel显示数据,FormPanel处理用户输入。Grid Panel提供了分页、排序、过滤等功能,方便用户查看和操作数据。FormPanel则用于创建表单,用户填写信息后,通过表单的submit方法将数据...
Store可以配置为自动加载数据,或者在用户触发特定事件时加载。同时,它支持分页、排序和过滤,以便灵活地处理大量数据。 3. 更新(Update) 当用户修改GridPanel中的数据或在FormPanel中编辑现有记录时,ExtJS会...
例如,你可以创建一个通用的FormPanel组件,然后在将其添加到不同容器时,根据具体场景为其分配不同的提交URL。 总结一下,ExtJS4中给同一个FormPanel设置不同URL的关键在于: 1. 不在FormPanel的配置中硬编码`url...
EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns.add()`或`columns.remove()`方法实现。例如,你可以根据后端返回的数据结构来决定Grid中显示哪些列。此外,`reconfigure()`方法可以用来...
1. **数据存储(Data Store)**:ExtJS的数据存储类(如`Ext.data.Store`或`Ext.data.SimpleStore`)用于管理数据。在这个例子中,`SimpleStore`被用来填充查询下拉框的选项。数据存储通常与数据源(如RESTful API)...