1.业务需要动态生成表单,根据表字段生成相应的textfield
2.这里实例是struts实现的,标签语言是jstl.
3.java操作略去,从前端开始
4.思路:
1.直接拼凑form里面的item布局字符串,然后json.decode就行了
2.一行一行的生成控件然后加入进去。重新layout一下
5.代码:
Ext.onReady(function(){
Ext.QuickTips.init();
<c:set var="interArr" value="${fn:length(checklist)}"></c:set> //jstl标签,取得控件的总个数
<c:set var="checkArr" value="${checklist}"></c:set>//是一个list对象,里面是自定义的table对象,包含表名称、字段名称、字段类型、中文字段名称
var i=${interArr};//获取记录数
//下面代码是实现四列的布局代码,主要是什么时候加入元素结束符,很简单看看就明白了
var n = Math.round(i/4)==0?1:Math.round(i/4);
var c = i<4?i:4;
var str ="[";
var k=0;
<c:forEach items="${checkArr}" var="chitem">
if(k%4==0)
{
str +='{'+
"layout: 'column',"+
"border:false,"+
"items: [";
}
str+= "{layout:'form',columnWidth:.25,items:[{xtype:'${chitem.xtype}',";
str+= "fieldLabel: '${chitem.columnChName}',";
str+= "name: '${chitem.columnName}',";
str+= "anchor:'95%'";
str+= "}]}";
if(k!=i-1&&k%4!=3)
{
str+=",";
}
if((k%4==3)||(k==i-1))
{
str += "]}"
if(k!=i-1)
str+=",";
}
k++;
</c:forEach>
//alert(str);
//document.getElementById("te").value= str;
str+="]";
var itemsstr = Ext.util.JSON.decode(str); //json的decode转换成控件
//字符串拼凑完毕
//document.getElementById("dd").value=str;
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var fp = new Ext.form.FormPanel({
renderTo: 'docbody',
//title : 'Composite Fields',
autoHeight: true,
//width : 600,
frame:true,
bodyStyle: 'padding: 5px',
layout: 'form',
labelWidth:100,
autoHeight: true,
autoWidth : true,
defaults: {
anchor: '0'
},
items : [
itemsstr
]
,
buttons: [{
text: '下一步',
handler: function(){
//var fp = this.ownerCt.ownerCt,
form = fp.getForm();
if (form.isValid()) {
}
}
},{
text: '重置',
handler: function(){
fp.getForm().reset();
}
}]
});
//完成了,下面的代码是实验的代码没有用
fp.doLayout();
//下面是手动创建行的示例,网上找的,我试了试可行,这种方法应该更好,我上面的方法不细心的话容易出错。
var pnRow2=new Ext.Panel({
layout:'column',
border:false,
items:[
new Ext.Panel({
columnWidth:.5,
layout:'form',
border:false,
labelWidth:40,
labelAlign:'right',
items:[
{
xtype:'datefield',
name:'birthday',
fieldLabel:'生日',
anchor:'95%'
}
]
}),
new Ext.Panel({
columnWidth:.5,
layout:'form',
border:false,
labelWidth:40,
labelAlign:'right',
items:[
{
xtype:'combo',
name:'study',
store:['专科','本科','硕士','博士'],
fieldLabel:'学历',
anchor:'95%'
}
]
})
]
});
//var ddss= new Array
//fp.add(pnRow2);
//fp.doLayout();
});
这样就可以了,网上找了很多资料,但是很少有跟我需求一样的,其中有个问题很奇怪:
<c:set var="checkArr" value="${checklist}"></c:set>
我这样${checklist[0].xtype}就可以
但是这样:
int j=0;
${checklist[j].xtype}这样就不行 很奇怪,所以最后用的foreach语句。
补充说明一下:
str+= "{layout:'form',columnWidth:.25,items:[{xtype:'${chitem.xtype}',"; str+= "fieldLabel: '${chitem.columnChName}',"; str+= "name: '${chitem.columnName}',"; str+= "anchor:'95%'";
这里就是读取对象属性的,columnName,xtype这些都是我定义对象的属性名称。
extjs刚刚入门写的不好,有用到的希望对你有帮助。