Extjs学习心得
发布时间:2020-12-16 00:42:16 所属栏目:百科 来源:网络整理
导读: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,u
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 formPanel = new Ext.form.FormPanel({ height: 555, width: 845, autoHeight: true, border : false, layout: { type: 'column' }, bodyPadding: 10, items: [{ xtype: 'form', layout : 'column', height: 418, margin: 10, id:"form", width: 811, bodyPadding: 10, title: 'Form Value Setting', items: [] } ] }); //测试从后台传sdto数据至前台” Ext.define("formPropertyTPList",{ extend:"Ext.data.Model", fields:[ {name: 'FmPropTpName',type:'string'}, {name: 'SelectValue', {name: 'RefFormTpId',type:'long'}, {name: 'DataTPSdto.dataTpName',type:'string'} ] }); Ext.Ajax.request({ url:"createNewForm/createNewForm!viewFormPropTPData.action", 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 fmPropTpName=map.fmPropTpName; var selectValue = map.selectValue; if(null != selectValue){ radioValues = selectValue.split("|"); } var refFormTpId = map.refFormTpId; var dataTpName=arry.dataTpName; tocreate(dataTpName,fmPropTpName,radioValues,refFormTpId); } } }); function tocreate(tp,tName,refFormTpId){ switch(tp){ case 'bit(1)' : var radio1 = Ext.create('Ext.form.field.Radio',{ margin: '5 10 5 10', emptyText: "请输入...", fieldLabel: tName, width: 300, labelWidth: 100, boxLabel: radioValues[0], inputValue: 'm' }); var radio2 = Ext.create('Ext.form.field.Radio', emptyText:"请输入...", width:300, boxLabel : radioValues[1], inputValue: 'f' }); Ext.getCmp('form').add(radio1); Ext.getCmp('form').add(radio2); break; case 'VARCHAR(255)': var textField = Ext.create('Ext.form.field.Text', labelWidth: 100 }); Ext.getCmp('form').add(textField); break; case'bigint(20)': var textField = Ext.create('Ext.form.field.Text', labelWidth: 100 }); Ext.getCmp('form').add(textField); break; case'numeric(22,2)': var textField = Ext.create('Ext.form.field.Text', labelWidth: 100 }); Ext.getCmp('form').add(textField); break; case 'int(11)' : var textField = Ext.create('Ext.form.field.Text', labelWidth: 100 }); Ext.getCmp('form').add(textField); break; case 'double' : var textField = Ext.create('Ext.form.field.Text', labelWidth: 100 }); Ext.getCmp('form').add(textField); break; case 'text' : var textArea = Ext.create('Ext.form.field.TextArea', labelWidth: 100 }); Ext.getCmp('form').add(textArea); break; case 'longtext' : var textArea = Ext.create('Ext.form.field.TextArea', labelWidth: 100 }); Ext.getCmp('form').add(textArea); 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?refFormTpId=" + refFormTpId, reader: {type: 'json',root : "formPropertyList"} } }); countryStore.load(); alert(countryStore.colum0); 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 : 'Country',// 再次提醒,name只是下拉列表的名称 margin: '5 10 5 10', width:300, labelWidth: 100 }); Ext.getCmp('form').add(comboBox); break; case 'timestamp' : break; case 'datetime' : var selectedDate = Ext.create('Ext.form.DateField', format : 'Y-m-d',//日期格式 // minDate: new Date(), labelWidth: 100 }); Ext.getCmp('form').add(selectedDate); break; case'date' : var selectedDate = Ext.create('Ext.form.DateField',//日期格式 width:300, labelWidth: 100 }); Ext.getCmp('form').add(selectedDate); break; case 'include1': break; case 'include2' : break; case 'include3' : break; case 'relationship' : break; } } // for (var i = 0; i<response.length; i++){ // var fmPropTpName = response[i].fmPropTpName; // var selectValue = response[i].selectValue; // if(null != selectValue){ // radioValues = selectValue.split("|"); // } // var refFormTpId = response[i].refFormTpId; // var dataTp = response[i].dataTPSdto.dataTpName; // alert(refFormTpId); // /*********textField****start*********/ // var textField = Ext.create('Ext.form.field.Text',{ // margin: '5 10 5 10', // emptyText:"请输入...", // fieldLabel: fmPropTpName, // width:300, // labelWidth: 100 // }); // /*********textField**** end *********/ // /*********textArea****start*********/ // var textArea = Ext.create('Ext.form.field.TextArea', // labelWidth: 100 // }); // /*********textArea**** end *********/ // /*********radio****start*********/ // var radio1 = Ext.create('Ext.form.field.Radio', // labelWidth: 100, // boxLabel : radioValues[0], // inputValue: 'm' // }); // var radio2 = Ext.create('Ext.form.field.Radio', // boxLabel : radioValues[1], // inputValue: 'f' // }); // /*********radio**** end *********/ // /*********comboBox****start*********/ // Ext.define("Country",{ // extend:"Ext.data.Model", // fields : [ // {name: 'countryName',type: 'string'}, // {name: 'countryId',type: 'int'} // ] // }); // var countryStore = Ext.create("Ext.data.Store",{ // model:"Country", // idProperty: 'countryId', // proxy:{ // type:"ajax", // url:"createNewForm/createNewForm!accquireCountryData.action", // params:{infoId:refFormTpId}, // reader: {type: 'json',root : "countries"} // } // }); // countryStore.load(); // var comboBox = Ext.create('Ext.form.ComboBox',{ // store: countryStore, // valueField : "countryId",// 设置下拉选择框的值 // displayField : "countryName",// 设置下拉选择框的显示文本 // mode : 'local',// 数据是在本地 // 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 : fmPropTpName, // name : 'Country',// 再次提醒,name只是下拉列表的名称 // margin: '5 10 5 10', // labelWidth: 100 // }); // /*********comboBox**** end *********/ // /*********selectedDate****start*********/ // var selectedDate = Ext.create('Ext.form.DateField', // format : 'Y-m-d',//日期格式 //// minDate: new Date(), // labelWidth: 100 // }); // /*********selectedDate**** end *********/ // // switch(dataTp){ // case 'bit(1)' : // Ext.getCmp('form').add(radio1); // Ext.getCmp('form').add(radio2);break; // // case 'VARCHAR(255)' : // case 'bigint(20)' : // case 'numeric(22,2)' : // case 'int(11)' : // case 'double' : // Ext.getCmp('form').add(textField);break; // // case 'text' : // case 'longtext' : // Ext.getCmp('form').add(textArea);break; // // case 'reference' : // Ext.getCmp('form').add(comboBox);break; // // case 'timestamp' : // break; // // case 'datetime' : // Ext.getCmp('form').add(selectedDate);break; // // case 'date' : // Ext.getCmp('form').add(selectedDate);break; // // case 'include1' : // break; // // case 'include2' : // break; // // case 'include3' : // break; // // case 'relationship' : // break; // } // } } }); formPanel.render(document.body); });
上面的js代码实现了:先取到formPropertyType中的formPropTpName作为每一个组件对应的fieldLabel;formPropertyType中关联的dataType里的dataTypeName作为要显示的组件类型的判断,区分每一个数据类型,然后定义并加载对应的组件来显示, 完成动态给formPanel add组件radio,combo,text,textArea,DateField等组件;将取到的refFormTpId 作为参数传回去取下拉框里的内容,成功的传回了参数并且在加载combobox下拉框的时候取到了对应下拉框里的值。
用switch来判断不同类型的数据以便于加载不同组件;后面的注释代码是最开始用if,else组合来判断的。
实现了动态添加Extjs组件,并且显示数据库里的内容。 对应action,Struts,jsp见图片。 图action1 图action2 图struts 图jsp (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |