Extjs 3,jstl根据数据库数据自动构建FormPanel(Extjs系列2)

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();
});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
这样就可以了，网上找了很多资料，但是很少有跟我需求一样的，其中有个问题很奇怪：

<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刚刚入门写的不好，有用到的希望对你有帮助。