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

这样就可以了，网上找了很多资料，但是很少有跟我需求一样的，其中有个问题很奇怪：

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