extjs4 数据库读取数据动态生成表单

extjs4 数据库读取数据动态生成表单_第1张图片

var n=0;     
 var oForm = Ext.create('Ext.form.Panel', {  
        layout:"form",
        id:'myform',
        hideLabels:false,
        border:false,
      
        labelAlign:"right",
        labelWidth:70,
        width:700,
        items:[
            {xtype:'button',text:'添加修改记录',  
            style: ' float:right; margin-bottom:10px',   
            labelAlign:"right", 
            
            listeners:{
                click:function(){
                    
                    
           InserForm(0,'');
                    

                }
            }
            
            
            }
        ]
    });


读取数据库信息


  $.get(url, function(a){
 
for(i=0;i{
InserForm(i+1,a.data[i].name);
}
    });


function InserForm(num,name)
{


if(num==0)
{
n++;
}
else
{
n=num;
}
var form = new Ext.form.FormPanel({  
    layout:'hbox',
    border:false,
             items: [
             
               {  
                                                    xtype: 'textfield',  
                                                     fieldLabel: '修改记录' +  n,  
                                                    name: 'modifyname'+ n,    
                                                     id: 'modifyname'+ n,   
                                                    allowBlank: false,  
                                                   labelAlign:"right",
                                                    blankText: 'aa名称不能为空',  
                                                    regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,  
                                                    regexText: '格式应由汉字、数字、字母或下划线组成.',  
                                                    maxLength: 20,  
                                                    maxLengthText: "aa名称长度不能多于20个字!",
                                                    width:400
                                                },
                                                
               {  
                                                 
                                                       style: 'background: #368ECE;border-color:#126DAF;margin-left: 10px',   
                                                    name: 'modifytime',
                                                    xtype:'datefield',editable:false,format:'Y-m-d',allowBlank: false
                                                  
                                                  
                                                },
                                                {  
                                                    xtype: 'button',  
                                                    text: '删除',  
                                                    style: 'background: #368ECE;border-color:#126DAF;margin-left: 10px',  
                                                    handler: function () {  
                                                   
                                                       var _panel = this.ownerCt;
                                                     _panel.hide();
 
                                                      
                                                    }  
                                                }  
             ]       
                    })




getcmp('modifyname'+n).setValue(name);                 
getcmp('myform').items.add(oForm.items.getCount(), form);
getcmp('myform').doLayout();

}

你可能感兴趣的:(EXT,JS4)