Extjs学习心得
2014-01-24 17:09
169 查看
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',type:'string'},
{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,radioValues,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',{
margin: '5 10 5 10',
emptyText:"请输入...",
width:300,
labelWidth: 100,
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',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case'bigint(20)':
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case'numeric(22,2)':
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'int(11)' :
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'double' :
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'text' :
var textArea = Ext.create('Ext.form.field.TextArea',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textArea);
break;
case 'longtext' :
var textArea = Ext.create('Ext.form.field.TextArea',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
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',{
margin: '5 10 5 10',
fieldLabel: tName,
format : 'Y-m-d',//日期格式
// minDate: new Date(),
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(selectedDate);
break;
case'date' :
var selectedDate = Ext.create('Ext.form.DateField',{
margin: '5 10 5 10',
fieldLabel: tName,
format : 'Y-m-d',//日期格式
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',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// fieldLabel: fmPropTpName,
// width:300,
// labelWidth: 100
// });
// /*********textArea**** end *********/
// /*********radio****start*********/
// var radio1 = Ext.create('Ext.form.field.Radio',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// fieldLabel: fmPropTpName,
// width:300,
// labelWidth: 100,
// boxLabel : radioValues[0],
// inputValue: 'm'
// });
// var radio2 = Ext.create('Ext.form.field.Radio',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// width:300,
// labelWidth: 100,
// 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',
// width:300,
// labelWidth: 100
// });
// /*********comboBox**** end *********/
// /*********selectedDate****start*********/
// var selectedDate = Ext.create('Ext.form.DateField',{
// margin: '5 10 5 10',
// fieldLabel: fmPropTpName,
// format : 'Y-m-d',//日期格式
//// minDate: new Date(),
// width:300,
// 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
'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',type:'string'},
{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,radioValues,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',{
margin: '5 10 5 10',
emptyText:"请输入...",
width:300,
labelWidth: 100,
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',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case'bigint(20)':
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case'numeric(22,2)':
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'int(11)' :
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'double' :
var textField = Ext.create('Ext.form.field.Text',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textField);
break;
case 'text' :
var textArea = Ext.create('Ext.form.field.TextArea',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(textArea);
break;
case 'longtext' :
var textArea = Ext.create('Ext.form.field.TextArea',{
margin: '5 10 5 10',
emptyText:"请输入...",
fieldLabel: tName,
width:300,
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',{
margin: '5 10 5 10',
fieldLabel: tName,
format : 'Y-m-d',//日期格式
// minDate: new Date(),
width:300,
labelWidth: 100
});
Ext.getCmp('form').add(selectedDate);
break;
case'date' :
var selectedDate = Ext.create('Ext.form.DateField',{
margin: '5 10 5 10',
fieldLabel: tName,
format : 'Y-m-d',//日期格式
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',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// fieldLabel: fmPropTpName,
// width:300,
// labelWidth: 100
// });
// /*********textArea**** end *********/
// /*********radio****start*********/
// var radio1 = Ext.create('Ext.form.field.Radio',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// fieldLabel: fmPropTpName,
// width:300,
// labelWidth: 100,
// boxLabel : radioValues[0],
// inputValue: 'm'
// });
// var radio2 = Ext.create('Ext.form.field.Radio',{
// margin: '5 10 5 10',
// emptyText:"请输入...",
// width:300,
// labelWidth: 100,
// 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',
// width:300,
// labelWidth: 100
// });
// /*********comboBox**** end *********/
// /*********selectedDate****start*********/
// var selectedDate = Ext.create('Ext.form.DateField',{
// margin: '5 10 5 10',
// fieldLabel: fmPropTpName,
// format : 'Y-m-d',//日期格式
//// minDate: new Date(),
// width:300,
// 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 