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

先上代码：

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',
{name: 'RefFormId',type:'long'},
{name: 'TNFormPropertyTPId',
{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,tNFormPropertyTPId);
}
}
}
});

function toCreateFunctionOne(tp,tName,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,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
VARCHAR++;
break;
case'bigint(20)':
var textField = Ext.create('Ext.form.field.Text',
name:"textFieldbigint"+bigint,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
bigint++;
break;
case'numeric(22,2)':
var textField = Ext.create('Ext.form.field.Text',
name:"textFieldnumeric"+numeric,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
numeric++;
break;
case 'int(11)' :
var textField = Ext.create('Ext.form.field.Text',
name:"textFieldint"+normalInt,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
normalInt++;
break;
case 'double' :
var textField = Ext.create('Ext.form.field.Text',
name:"textFielddouble"+normalDouble,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
normalDouble++;
break;
case 'text' :
var textArea = Ext.create('Ext.form.field.TextArea',
name:"textAreatext"+text,
labelWidth: 100
});
Ext.getCmp('form').add(textArea);
text++;
break;
case 'longtext' :
var textArea = Ext.create('Ext.form.field.TextArea',
name:"textArealongtext"+longtext,
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',
format : 'Y-m-d',//日期格式
name:"selectedDatedatetime"+datetime,
labelWidth: 100
});
Ext.getCmp('form').add(selectedDate);
datetime++;
break;
case'date' :
var selectedDate = Ext.create('Ext.form.DateField',//日期格式
name:"selectedDatedate"+date,
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,
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,
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',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,
tbar:[
{text:'新增',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数据处理。