关于Extjs的取值加载以及输入之后的ajax提交数据

来源:互联网 发布:java垃圾桶 编辑:程序博客网 时间:2024/06/05 17:50

先上代码:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*'
]);
Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置,主要可选的位置有:qtip,title,under,side,[elementId]
    var length;
//获取url中的参数
var test = document.getElementById("addNewValjs");
var src = test.getAttribute("src");
var form_id = src.substring(src.indexOf('=')+1);
    var formPanel =  new Ext.form.FormPanel({
        height: 555,
        autoWidth:true ,
        autoHeight: true,
        border : false,
        layout: {
            type: 'column'
        },
        bodyPadding: 10,
        items: [{
                    xtype: 'label',
                    height: 23,
                    text: 'Add New Value'
                },
                {
                    xtype: 'button',
                    margin: '0 0 0 5',
                    text: 'save',
                    handler:function(){
                        /**************取值:将对应显示组件的输入值和对应的tNFormPropertyTPId取到***start***********/
                        var form = Ext.getCmp("form").getForm();//获得form表单控件
                        /********定义数组类型的数据,获得每个case内的id数据与value数据**********/
                        var radiobit = [];
                        var radiobitmapId = [];
                        var textFieldVARCHAR = [];
                        var textFieldVARCHARmapId = [];
                        var textFieldbigint = [];
                        var textFieldbigintmapId = [];
                        var textFieldnumeric = [];
                        var textFieldnumericmapId = [];
                        var textFieldint = [];
                        var textFieldintmapId = [];
                        var textFielddouble = [];
                        var textFielddoublemapId = [];
                        var textAreatext = [];
                        var textAreatextmapId = [];
                        var textArealongtext = [];
                        var textArealongtextmapId = [];
                        var comboBoxreference = [];
                        var comboBoxreferencemapId = [];
                        var selectedDatedatetime = [];
                        var selectedDatedatetimemapId = [];
                        var selectedDatedate = [];
                        var selectedDatedatemapId = [];
                        var gridinclude3=[];
                        var gridinclude3mapId = [];
                        var IdString = [];
                        if(null != form.findField("radiobit0")){
                        for(var i = 0;i < bit; i++ ){
                          var radioCmp = form.findField("radiobit"+i);
                          var j = "radiobit"+i;//用j取到对象内的radiobit0,radiobit1...
                               var inputValue = radioCmp.getValue()[j];//取到对应的inputValue
                          radiobit[i] = radioCmp.getBoxes()[inputValue].boxLabel; //取到对应的boxLabel
                               radiobitmapId[i] = form.findField("radiobit"+i).mapId;
                        }
                        }
                        if(null != form.findField("textFieldVARCHAR0")){
                        for(var i = 0;i < VARCHAR; i++){
                          var obj =  form.findField("textFieldVARCHAR"+i);
                          textFieldVARCHAR[i] = form.findField("textFieldVARCHAR"+i).getValue();
                               textFieldVARCHARmapId[i] = form.findField("textFieldVARCHAR"+i).mapId;
                        }
                        }
                        if(null != form.findField("textFieldbigint0")){
                            for(var i = 0;i < bigint; i++){
                                textFieldbigint[i] = form.findField("textFieldbigint"+i).getValue();
                                textFieldbigintmapId[i] = form.findField("textFieldbigint"+i).mapId;
                            }
                        }
                        if(null != form.findField("textFieldnumeric0")){
                        for(var i = 0;i < numeric; i++){
                           textFieldnumeric[i] = form.findField("textFieldnumeric"+i).getValue();
                                textFieldnumericmapId[i] = form.findField("textFieldnumeric"+i).mapId;
                        }
                        }
                        if(null != form.findField("textFieldint0")){
                        for(var i = 0;i < normalInt; i++){
                           textFieldint[i] = form.findField("textFieldint"+i).getValue();
                                textFieldintmapId[i] = form.findField("textFieldint"+i).mapId;
                        }
                        }
                        if(null != form.findField("textFielddouble0")){
                        for(var i = 0;i < normalDouble; i++){
                                textFielddouble[i] = form.findField("textFielddouble"+i).getValue();
                                textFielddoublemapId[i] = form.findField("textFielddouble"+i).mapId;
                        }
                        }
                        if(null != form.findField("textAreatext0")){
                        for(var i = 0;i < text; i++){
                                textAreatext[i] = form.findField("textAreatext"+i).getValue();
                                textAreatextmapId[i] = form.findField("textAreatext"+i).mapId;
                        }
                        }
                        if(null != form.findField("textArealongtext0")){
                        for(var i = 0;i < longtext; i++){
                                textArealongtext[i] = form.findField("textArealongtext"+i).getValue();
                                textArealongtextmapId[i] = form.findField("textArealongtext"+i).mapId;
                        }
                        }
                        if(null != form.findField("comboBoxreference0")){
                        for(var i = 0;i < reference; i++){
                                comboBoxreference[i] = form.findField("comboBoxreference"+i).getValue();
                                comboBoxreferencemapId[i] = form.findField("comboBoxreference"+i).mapId;
                        }
                        }
                        if(null != form.findField("selectedDatedatetime0")){
                        for(var i = 0;i < datetime; i++){
                                selectedDatedatetime[i] = form.findField("selectedDatedatetime"+i).getValue();
                                selectedDatedatetimemapId[i] = form.findField("selectedDatedatetime"+i).mapId;
                        }
                        }
                        if(null != form.findField("selectedDatedate0")){
                        for(var i = 0;i < date; i++){
                                selectedDatedate[i] = form.findField("selectedDatedate"+i).getValue();
                                selectedDatedatemapId[i] = form.findField("selectedDatedate"+i).mapId;
                        }
                        }
                        if(null != Ext.getCmp("configGrid0")){
                        for(var i = 0;i < include3; i++){
                        var gridObj = Ext.getCmp("configGrid"+i);
                        gridinclude3mapId[i] = Ext.getCmp("configGrid"+i).mapId;
                                for(var a = 0;a<length;a++){
                                    IdString[a] = gridObj.columnManager.columns[a].propertyTPId;
                                }
                        //以下为存grid内的数据
                                var grid_include3 = Ext.getCmp("configGrid"+i);//获取到grid
                                var m = grid_include3.store.getModifiedRecords();//m表示被修改的行
                                gridinclude3[i] = '[';
                                for (var a = 0; a < m.length; a++) {
                                    gridinclude3[i] = gridinclude3[i] + Ext.JSON.encode(m[a].data) + ',';
                                }
                                gridinclude3[i]=gridinclude3[i].length>0?gridinclude3[i].substring(0,gridinclude3[i].length-1):gridinclude3[i] ;
                                gridinclude3[i] += ']';
                        }
                        }
                        /****取值:将对应显示组件的输入值和对应的tNFormPropertyTPId取到***end*****/                      
                        if (Ext.getCmp('form').getForm().isValid()) {
                           Ext.getCmp('form').getForm().submit({
                                    url:'createNewForm/createNewForm!addNewValue.action',
                                    method:'POST',
                                    params:{formId:form_id,
                                            radiobit:JSON2.stringify(radiobit),
                                            radiobitmapId:JSON2.stringify(radiobitmapId),
                                            textFieldVARCHAR:JSON2.stringify(textFieldVARCHAR),
                                            textFieldVARCHARmapId:JSON2.stringify(textFieldVARCHARmapId),
                                            textFieldbigint:JSON2.stringify(textFieldbigint),
                                            textFieldbigintmapId:JSON2.stringify(textFieldbigintmapId),
                                            textFieldnumeric:JSON2.stringify(textFieldnumeric),
                                            textFieldnumericmapId:JSON2.stringify(textFieldnumericmapId),
                                            textFieldint:JSON2.stringify(textFieldint),
                                            textFieldintmapId:JSON2.stringify(textFieldintmapId),
                                            textFielddouble:JSON2.stringify(textFielddouble),
                                            textFielddoublemapId:JSON2.stringify(textFielddoublemapId),
                                            textAreatext:JSON2.stringify(textAreatext),
                                            textAreatextmapId:JSON2.stringify(textAreatextmapId),
                                            textArealongtext:JSON2.stringify(textArealongtext),
                                            textArealongtextmapId:JSON2.stringify(textArealongtextmapId),
                                            comboBoxreference:JSON2.stringify(comboBoxreference),
                                            comboBoxreferencemapId:JSON2.stringify(comboBoxreferencemapId),
                                            selectedDatedatetime:JSON2.stringify(selectedDatedatetime),
                                            selectedDatedatetimemapId:JSON2.stringify(selectedDatedatetimemapId),
                                            selectedDatedate:JSON2.stringify(selectedDatedate),
                                            selectedDatedatemapId:JSON2.stringify(selectedDatedatemapId),
                                            gridinclude3:JSON2.stringify(gridinclude3),
                                            gridinclude3mapId:JSON2.stringify(gridinclude3mapId),
                                            IdString:JSON2.stringify(IdString)
                                    },
                                    waitTitle : "提示",
                                    waitMsg: '请稍等,正在提交数据……',
                                    success: function(form, action){
                                        alert(action.response.responseText);
                                    },
                                    failure: function(form, action){
                                        alert("不成功");
                                    }
                               });
                        }else{
                            alert("未通过验证");
                        }
                    }
                },{
                    xtype: 'form',       
                    layout : 'column',
                    autoHeight: true,
                    margin: 10,
                    id:"form",
                    autoWidth: true,
                    bodyPadding: 10,
                    title: 'Form Value Setting',
                    items: []
                }
            ]
        });
     //测试从后台传sdto数据至前台”
    Ext.define("formPropertyTPList",{
        extend:"Ext.data.Model",
        fields:[
                   {name: 'FmPropTpName',type:'string'},
                   {name: 'SelectValue',type:'string'},
                   {name: 'RefFormId',type:'long'},
                   {name: 'TNFormPropertyTPId',type:'long'},
                   {name: 'DataTPSdto.dataTpName',type:'string'}
               ]
    });
    
    /**************定义全部变量使得在提交时能得到这边计数的数***************/
    var bit = 0;
    var VARCHAR = 0;
    var bigint = 0;
    var numeric = 0;
    var normalInt = 0;//对int类数据进行计数
    var normalDouble = 0;//对double类数据进行计数
    var text = 0;
    var longtext = 0;
    var reference = 0;
    var timestamp = 0;
    var datetime = 0;
    var date = 0;
    var include1 = 0;
    var include2 = 0;
    var include3 = 0;
    var relationship = 0;
    
    //定义全局变量,便于在方法外获取数据
    var dataObj = new Array();
   // var formID = ${form_id};
    Ext.Ajax.request({
            url:"createNewForm/createNewForm!viewFormPropTPData.action?form_id="+form_id,
            success:function(response,options){
                var response = Ext.JSON.decode(response.responseText);
                $.each(response, function (i, map) { 
                    for(var k in map){ 
                        if(k=="dataTPSdto"){
                            var arry=map[k];
                            var dataTpName=arry.dataTpName;
                            var fmPropTpName=map.fmPropTpName;
                            //处理selectValue作为单选按钮的选项的标签
                            var selectValue = map.selectValue;
                            var radioValues = null;
                            if(null != selectValue){
                                radioValues = selectValue.split("|");
                            }
                            var refFormId = map.refFormId;
                            var tNFormPropertyTPId =map.tNFormPropertyTPId;
                            if(null != radioValues){
                                toCreateFunctionOne(dataTpName,fmPropTpName,radioValues,refFormId,tNFormPropertyTPId);
                            }
                            else{
                            toCreateFunctionTwo(dataTpName,fmPropTpName,refFormId,tNFormPropertyTPId);
                            }
                        }
                    }
                });
 
                function toCreateFunctionOne(tp,tName,radioValues,refFormId,tNFormPropertyTPId){
                    switch(tp){
                        case 'bit(1)' :
                            var radio = new Ext.form.RadioGroup({
                                fieldLabel: tName,
                                mapId:tNFormPropertyTPId,
                                name:"radiobit"+bit,
                                margin: '5 10 5 10',
                                emptyText: "请输入...",
                                width: 300,
                                labelWidth: 100,
                                 items: [{
                                     name:"radiobit"+bit,
                                     inputValue: '0',
                                     boxLabel: radioValues[0]
                                 }, {
                                     name:"radiobit"+bit,
                                     inputValue: '1',
                                     boxLabel: radioValues[1]
                                 }]
                             });
                            Ext.getCmp('form').add(radio);
                            bit++; 
                            break;
                        case 'VARCHAR(255)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldVARCHAR"+VARCHAR,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            VARCHAR++;
                            break;
                        case'bigint(20)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldbigint"+bigint,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            bigint++;
                            break;
                        case'numeric(22,2)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldnumeric"+numeric,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            numeric++;
                            break;
                        case 'int(11)' :
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldint"+normalInt,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            normalInt++;
                            break;
                        case 'double' :
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFielddouble"+normalDouble,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            normalDouble++;
                            break;
                        case 'text' :
                            var textArea = Ext.create('Ext.form.field.TextArea',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textAreatext"+text,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textArea);
                            text++;
                            break;
                        case 'longtext' :
                            var textArea = Ext.create('Ext.form.field.TextArea',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textArealongtext"+longtext,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textArea);
                            longtext++;
                            break;
                        case 'reference' :
                            Ext.define("formProperty",{
                                extend:"Ext.data.Model",
                                fields : [
                                    {name: 'tNFormPropertyId', type: 'long'},
                                    {name: 'colum0', type: 'string'}
                                ]
                            });                      
                           var countryStore = Ext.create("Ext.data.Store",{            
                                model:"formProperty",
                                proxy:{
                                   type:"ajax",
                                   url:"createNewForm/createNewForm!accquireCountryData.action?refFormId=" + refFormId,
                                   reader: {type: 'json',root : "formPropertyList"}
                                }
                            });                    
                           countryStore.load();
                           var comboBox =  Ext.create('Ext.form.ComboBox', {
                               store: countryStore,
                               valueField : "tNFormPropertyId",// 设置下拉选择框的值
                               displayField : "colum0",// 设置下拉选择框的显示文本
                               mode : 'remote',// 数据是在本地
                               forceSelection : true,// 必须选择一个选项
                               blankText : 'Country',// 提交form时,该项如果没有选择,则提示错误信息"请选择学历"
                               emptyText : 'Country',// 在没有选择值时显示为选择学历
                               hiddenName : 'Country',// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到数据的,这个大家一定要注意。
                               editable : false,
                               triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                               allowBlank : false,
                               fieldLabel : tName,
                               name:"comboBoxreference"+reference,
                               mapId:tNFormPropertyTPId,
                               margin: '5 10 5 10',
                               width:300,
                               labelWidth: 100
                           });
                            Ext.getCmp('form').add(comboBox);
                            reference++;
                            break;
                        case 'timestamp' :
                            timestamp++;
                            break;
                        case 'datetime' :
                            var selectedDate = Ext.create('Ext.form.DateField',{
                                margin: '5 10 5 10',
                                fieldLabel: tName,
                                format : 'Y-m-d',//日期格式
                                name:"selectedDatedatetime"+datetime,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(selectedDate);
                            datetime++;
                            break;
                        case'date' :
                            var selectedDate = Ext.create('Ext.form.DateField',{
                                margin: '5 10 5 10',
                                fieldLabel: tName,
                                format : 'Y-m-d',//日期格式
                                name:"selectedDatedate"+date,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(selectedDate);
                            date++;
                            break;
                        case 'include1':
                            include1++;
                            break;
                        case 'include2' :
                            include2++;
                            break;
                        case 'include3' :
                            Ext.Ajax.request({
                                url:"createNewForm/createNewForm!accquireRefForm.action?refFormId=" + refFormId,
                                success:function(response){
                                    var trim = Ext.JSON.decode(response.responseText.trim());
                                    var arrLen = trim.length;
                                    for(var i=0;i<arrLen;i++){
                                        var fieldsNames = trim[i].fieldsNames;
                                        var data = trim[i].data;
                                        length = fieldsNames.length; 
                                        var columModel =trim[i].columModel;
                                        var cmObj = new Array();
                                        for(var i=0;i<columModel.length;i++){
                                            cmObj.push(eval('('+columModel[i]+')'));
                                        }
                                        for(var i=0;i<data.length;i++){
                                            dataObj.push(eval('('+data[i]+')'));
                                        }
                                        var store = Ext.create('Ext.data.Store',{
                                            fields:fieldsNames, 
                                            data:dataObj,
                                            proxy: {
                                                type: 'ajax',
                                                reader: {
                                                    type: 'json'
                                                }
                                            }
                                        });
                                        var id = "configGrid"+(include3-1);
                                        Ext.getCmp(id).reconfigure(store,cmObj);
                                    }
                                }
                            });
                            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                                clicksToMoveEditor: 1,
                                autoCancel: false,
                                saveBtnText: '加入数据库', 
                                cancelBtnText: "取消并删除该行",
                                autoRecoverOnCancel: true  //是否在取消编辑的时候自动删除添加的记录 
                                /*listeners: {
                                        canceledit: function (editor, e, eOpts) {//取消则删除添加的行
                                            e.store.remove(e.record);
                                            grid.view.refresh();//该行用于在删除一行后,使整个grid进行刷新,使行序号重新排列。
                                        }
                                    }*/
                            });
                            function doadd(){
                            var store = grid.getStore();
                            var n=store.getCount();
                                var data = dataObj;
                                store.insert(n,data);
                                rowEditing.cancelEdit();
                                rowEditing.startEdit(0,0);
                                rowEditing.validateEdit();
                            }
                            var grid = Ext.create("Ext.grid.Panel",{    
                                 id : 'configGrid'+include3,    
                                 name : 'configGrid'+include3,
                                 mapId:tNFormPropertyTPId,
                                 title: tName,
                                 forceFit:true,//自动填充panel的空白
                                 columns : [],    
                                 displayInfo : true,    
                                 emptyMsg : "没有数据显示",    
                                 items : [], 
                                 width:639,
                                 height:200,
                                 autoScroll:true,
                                 plugins: [rowEditing],
                                 tbar:[
                                  {text:'新增',width:100,iconCls:'user_add',handler : doadd}]
                            });  
                            Ext.getCmp('form').add(grid);
                            include3++;
                            break;
                        case 'relationship' :
                            relationship++;
                            break;
                    }
                }

                function toCreateFunctionTwo(tp,tName,refFormId,tNFormPropertyTPId){
                    switch(tp){
                        case 'bit(1)' :
                            var radio = new Ext.form.RadioGroup({
                                fieldLabel: tName,
                                mapId:tNFormPropertyTPId,
                                name:"radiobit"+bit,
                                margin: '5 10 5 10',
                                emptyText: "请输入...",
                                width: 300,
                                labelWidth: 100,
                                 items: [{
                                     name:"radiobit"+bit,
                                     inputValue: '0',
                                     boxLabel: radioValues[0]
                                 }, {
                                     name:"radiobit"+bit,
                                     inputValue: '1',
                                     boxLabel: radioValues[1]
                                 }]
                             });
                            Ext.getCmp('form').add(radio);
                            bit++; 
                            break;
                        case 'VARCHAR(255)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldVARCHAR"+VARCHAR,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            VARCHAR++;
                            break;
                        case'bigint(20)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldbigint"+bigint,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            bigint++;
                            break;
                        case'numeric(22,2)':
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldnumeric"+numeric,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            numeric++;
                            break;
                        case 'int(11)' :
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFieldint"+normalInt,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            normalInt++;
                            break;
                        case 'double' :
                            var textField = Ext.create('Ext.form.field.Text',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textFielddouble"+normalDouble,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textField);
                            normalDouble++;
                            break;
                        case 'text' :
                            var textArea = Ext.create('Ext.form.field.TextArea',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textAreatext"+text,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textArea);
                            text++;
                            break;
                        case 'longtext' :
                            var textArea = Ext.create('Ext.form.field.TextArea',{
                                margin: '5 10 5 10',
                                emptyText:"请输入...",
                                fieldLabel: tName,
                                name:"textArealongtext"+longtext,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(textArea);
                            longtext++;
                            break;
                        case 'reference' :
                            Ext.define("formProperty",{
                                extend:"Ext.data.Model",
                                fields : [
                                    {name: 'tNFormPropertyId', type: 'long'},
                                    {name: 'colum0', type: 'string'}
                                ]
                            });                      
                           var countryStore = Ext.create("Ext.data.Store",{            
                                model:"formProperty",
                                proxy:{
                                   type:"ajax",
                                   url:"createNewForm/createNewForm!accquireCountryData.action?refFormId=" + refFormId,
                                   reader: {type: 'json',root : "formPropertyList"}
                                }
                            });                    
                           countryStore.load();
                           var comboBox =  Ext.create('Ext.form.ComboBox', {
                               store: countryStore,
                               valueField : "tNFormPropertyId",// 设置下拉选择框的值
                               displayField : "colum0",// 设置下拉选择框的显示文本
                               mode : 'remote',// 数据是在本地
                               forceSelection : true,// 必须选择一个选项
                               blankText : 'Country',// 提交form时,该项如果没有选择,则提示错误信息"请选择学历"
                               emptyText : 'Country',// 在没有选择值时显示为选择学历
                               hiddenName : 'Country',// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到数据的,这个大家一定要注意。
                               editable : false,
                               triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                               allowBlank : false,
                               fieldLabel : tName,
                               name:"comboBoxreference"+reference,
                               mapId:tNFormPropertyTPId,
                               margin: '5 10 5 10',
                               width:300,
                               labelWidth: 100
                           });
                            Ext.getCmp('form').add(comboBox);
                            reference++;
                            break;
                        case 'timestamp' :
                            timestamp++;
                            break;
                        case 'datetime' :
                            var selectedDate = Ext.create('Ext.form.DateField',{
                                margin: '5 10 5 10',
                                fieldLabel: tName,
                                format : 'Y-m-d',//日期格式
                                name:"selectedDatedatetime"+datetime,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(selectedDate);
                            datetime++;
                            break;
                        case'date' :
                            var selectedDate = Ext.create('Ext.form.DateField',{
                                margin: '5 10 5 10',
                                fieldLabel: tName,
                                format : 'Y-m-d',//日期格式
                                name:"selectedDatedate"+date,
                                mapId:tNFormPropertyTPId,
                                width:300,
                                labelWidth: 100
                            });
                            Ext.getCmp('form').add(selectedDate);
                            date++;
                            break;
                        case 'include1':
                            include1++;
                            break;
                        case 'include2' :
                            include2++;
                            break;
                        case 'include3' :
                            Ext.Ajax.request({
                                url:"createNewForm/createNewForm!accquireRefForm.action?refFormId=" + refFormId,
                                success:function(response){
                                    var trim = Ext.JSON.decode(response.responseText.trim());
                                    var arrLen = trim.length;
                                    for(var i=0;i<arrLen;i++){
                                        var fieldsNames = trim[i].fieldsNames;
                                        var data = trim[i].data;
                                        length = fieldsNames.length; 
                                        var columModel =trim[i].columModel;
                                        var cmObj = new Array();
                                        for(var i=0;i<columModel.length;i++){
                                            cmObj.push(eval('('+columModel[i]+')'));
                                        }
                                        for(var i=0;i<data.length;i++){
                                            dataObj.push(eval('('+data[i]+')'));
                                        }
                                        
                                        var store = Ext.create('Ext.data.Store',{
                                            fields:fieldsNames, 
                                            data:dataObj,
                                            proxy: {
                                                type: 'ajax',
                                                reader: {
                                                    type: 'json'
                                                }
                                            }
                                        });
                                        var id = "configGrid"+(include3-1);
                                        Ext.getCmp(id).reconfigure(store,cmObj);
                                    }
                                }
                            });
                            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                                clicksToMoveEditor: 1,
                                autoCancel: false,
                                saveBtnText: '加入数据库', 
                                cancelBtnText: "取消并删除该行",
                                autoRecoverOnCancel: true  //是否在取消编辑的时候自动删除添加的记录 
                                /*listeners: {
                                        canceledit: function (editor, e, eOpts) {//取消则删除添加的行
                                            e.store.remove(e.record);
                                            grid.view.refresh();//该行用于在删除一行后,使整个grid进行刷新,使行序号重新排列。
                                        }
                                    }*/
                            });
                            
                            function doadd(){
                                var store = grid.getStore();
                                var n=store.getCount();
                                var data = dataObj;
                                store.insert(n,data);
                                rowEditing.cancelEdit();
                                rowEditing.startEdit(0,0);
                                rowEditing.validateEdit();
                            }
                            var grid = Ext.create("Ext.grid.Panel",{    
                                 id : 'configGrid'+include3,    
                                 name : 'configGrid'+include3,
                                 mapId:tNFormPropertyTPId,
                                 title: tName,
                                 forceFit:true,//自动填充panel的空白
                                 columns : [],    
                                 displayInfo : true,    
                                 emptyMsg : "没有数据显示",    
                                 items : [], 
                                 width:639,
                                 height:200,
                                 autoScroll:true,
                                 plugins: [rowEditing],
                                 tbar:[
                                    {text:'新增',width:100,iconCls:'user_add',handler : doadd}]
                            });  
                            Ext.getCmp('form').add(grid);
                            include3++;
                            break;
                        case 'relationship' :
                            relationship++;
                            break;
                    }
                }

           }
    });
    
    formPanel.render(document.body);
 });


上面的代码实现了根据formId查找对应的数据url:"createNewForm/createNewForm!viewFormPropTPData.action?form_id="+form_id,,进行显示,然后将可能显示的多个输入形式的输入数据以数组参数形式,提交到后台url:'createNewForm/createNewForm!addNewValue.action',。

涉及到Extjs从后台取值,以及Extjs传值到后台,还有不同的输入取值,封装等Extjs数据处理。

0 0
原创粉丝点击