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