转载: http://www.cyiyuan.com/showtopic-789.html
在开发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);
}
});
分享到:
相关推荐
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 ...
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
Ext的FormPanel组件说明formPanel的详细使用说明
formpanel数据源和grid相同,使用 Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件。2。formpanel数据源是单独的,则store传入到formpanel页面后,还需要手动将formpanel中的每个控件用...
this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); CKEDITOR.replace(this.id, this.config.CKConfig); ...
使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的。当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框。所以我们必须使用 Ext.form....
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
Extjs4 表单从数据库读取数据映射到对应的字段中显示
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
formpanel可以这样使用,api上的例子: 代码如下: var panel=Ext.create(‘Ext.form.Panel’, { title: ‘Simple Form’, bodyPadding: 5, width: 350, // 将会通过 AJAX 请求提交到此URL //url: ‘save-form.php’,...
5.grid数据加载,分页,编辑删除。 6.用户列表页面点编辑时,在父页面的TabPanel中增加一个标签,下放置一个iframe,将编辑 页面Url(带参数)放入iframe。 7.页面间传值[如:列表页面传ID给编辑页面] 8.FormPanel...
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
+为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
自我扩展FormPanel 和Store实现自动数据触发感知功能实现与store绑定功能
extjs4如何给同一个formpanel不同的url_.docx
ExtJs中表单formPanel的横向布局