ext form gridpanel

validator.js内容

var gridConfig = {};
var gridId = "statisticsGrid";
var xwidth = 290;
var fwidth = 160;
var _json= 1;
Ext.onReady(function(){
gridConfig.pagesize = pagesize;
gridConfig.gridId = gridId;
gridConfig.gridCmReaderConfig = [
{show:'uid',tag:'ROWNUM_',hidden:true},
{show:'验证员Id',tag:'VERIFIER_ID',hidden:true,xwidth:fwidth,position:'left',xtype:'hidden'},
{show:'机构名称',tag:'ORGANIZATION_NAME',hidden:true,xwidth:fwidth,position:'left',xtype:'hidden'},
{show:'验证员姓名',tag:'VERIFIER_NAME',hidden:false,xwidth:fwidth,position:'left',require:true},
{show:'验证员介绍',tag:'INTRODUCTION',hidden:true,xwidth:fwidth,position:'left',xtype:'hidden'},
{show:'图片地址',tag:'VERIFIER_PHOTO_URL',hidden:true,xwidth:fwidth,position:'left',xtype:'hidden'},
{show:'职称',tag:'VERIFIER_TITLE',hidden:false,xwidth:fwidth,position:'left'},
{show:'年龄/岁',tag:'VERIFIER_AGE',hidden:false,xwidth:fwidth,position:'left'},
{show:'学历',tag:'VERIFIER_DEGREE',hidden:false,xwidth:fwidth,position:'right'},
{show:'所属机构',tag:'CERTIFICATION_AUTHORITIES_ID',hidden:true,xwidth:fwidth,position:'right',xtype:'remoteSiteCombox',require:true},
{show:'发布状态',tag:'STATUS',hidden:false,renderer: statusName,xwidth:fwidth,position:'left',xtype:'commentLocal'},
{show:'是否推荐',tag:'TOP',hidden:true,xwidth:fwidth,position:'right',xtype:'isRecommendLocal'}
];

gridConfig.sm = true;
gridConfig.enableColumnHide=false,
gridConfig.storeURL = basepath+"/admin/validator/validators";
gridConfig.baseParams = {_json:_json};
/****************************状态下拉选*****************************/
var statusData = [
['-1','==全部=='],
['1','已发布'],
['0','未发布'],
['2','已删除']
];

var statusStore = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: statusData
});

var statusCombo = new Ext.form.ComboBox({
store: statusStore,
id:'statusCombo',
emptyText: '==全部==',
width:100,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
});

/**********************************************************************************/
var verifierName = {xtype:'textfield',emptyText:'==验证员姓名==',id:'verifierName'};
gridConfig.tbar=['->','-',{text:'添加验证员',handler:addFn,iconCls:'addBtn'},'-',
{text:'修改',handler:updateFn,iconCls:'updateBtn'},'-',
{text:'发布',handler:pubFn,iconCls:'rightBtn'},'-',
{text:'取消发布',handler:upubFn,iconCls:'noBtn'},'-',
{text:'删除',handler:delFn,iconCls:'delBtn'},'-',
"发布状态:",statusCombo,'-',
"验证员姓名:",verifierName,'-',
{text:'查询',handler:searchFn,iconCls:'searchBtn'},'-',
{text:'重置',handler:reSetFn,iconCls:'reSetBtn'},'-'
];
gridConfig.viewConfig = {
forceFit: true,
enableRowBody:true,
showPreview:false

};

var agrid = new basePagingGrid(gridConfig);

var viewport = new Ext.Viewport({
layout:'fit',
listeners:{'afterrender':function(){

}},
items:[agrid]
});

})

/**********************************弹出添加(修改)框**********************************************************/


/**********************************xby**********************************************************/
function addFn(btn)
{
showWinFn(btn,"add")
}
function updateFn(btn){
var grid = Ext.getCmp(gridId);
var sm = grid.getSelectionModel();
var sels = sm.getSelections();

if(sels.length ==0)return;
if(sels.length >=2)
{
Ext.Msg.alert("系统提示","请只选择一条记录进行修改！！！") ;
return;
}
var rec = sels[0];
showWinFn(btn,"update",rec)
}
function showWinFn(btn,flag,rec)
{
/**计算高度和宽度***/
var wwWin = Ext.getDom(window);
var abody = Ext.getBody().dom;

var ah = wwWin.screen['availHeight'];
var aw = wwWin.screen['availWidth'];

var aw = abody.clientWidth;
var ah = abody.clientHeight;
var title ="新增信息";
if(flag=="update"){
title = "更改信息";
}

var dataobj = {};
if(typeof rec != 'undefined')dataobj =Ext.apply( dataobj, rec.data ) ;
var obj = makeformpanel( gridConfig.gridCmReaderConfig,dataobj);
awin = new Ext.Window({
layout:'fit',
id:'savewin',
title:title,
width:aw,
height:ah,
closeAction:'close',
plain: true,
modal :true,
maximizable:true,
listeners :{
'afterrender':function(c)
{
if(typeof rec != 'undefined')
{
//设置编辑页面的内容
var dbcontents =rec.data['INTRODUCTION'];
var dbverifierPhotoUrl =rec.data['VERIFIER_PHOTO_URL'];
var certificationAuthoritiesId = rec.data["CERTIFICATION_AUTHORITIES_ID"];
var certificationName = rec.data["ORGANIZATION_NAME"];

var combox = Ext.getCmp("f_CERTIFICATION_AUTHORITIES_ID");
var siteName = certificationName;
var siteId = certificationAuthoritiesId;
if(siteName && combox)combox.setValue(siteName);
if(siteId && combox)combox.value =siteId;

if(Ext.isEmpty(dbcontents) ==false){
Ext.getCmp("aintroduction").setValue(dbcontents);

}
if(Ext.isEmpty(dbverifierPhotoUrl) ==false){

var c = Ext.getCmp("verifierPhotoUrl")
if(c){
//c.setValue(dborganizationPhotoUrl);
}else
{

}

}
// Ext.getCmp("organizationPhotoUrl").setValue(c_inf);


}
}},
minimizable :true,
items:[
new Ext.form.FormPanel({
id:'mainForm',
url: basepath+'/admin/validator/addOrUpdatevalidator',
fileUpload: true,
layout:'form',
border : false,
items:[{
frame:true,
border : false,
items: [{
layout:'column',
border : false,
items: [{
columnWidth:.5,
layout: 'form',
items:obj['left'].sort(sortNumber)
},{
columnWidth:.5,
layout: 'form',
items:obj['right'].concat([{
border : false,
xtype: 'textfield',
name:'verifierPhotoUrl',
id:'averifierPhotoUrl',
width: 300,
fieldLabel: '图片上传',
inputType: 'file'
}])
}]
}/**,{
//frame:true,
border : false,
layout:'form',
items:[]
}*/]
},{
xtype:'panel',
frame:true,
layout:'fit',
items:[{
name: 'aintroduction',
fieldLabel: '介绍',
height:250,
xtype:'fckeditor',
frame:true,
id:'aintroduction'
}]
}
]


})

],
buttons: [{
text: '关闭',
id:'shutdownBtn',
handler: function(){
awin.close();
}
},
{
text: '确定',
id:'sureBtn',
handler: function(){

var gridCmReaderConfig =gridConfig.gridCmReaderConfig;
var obj = getSubmitValue(gridCmReaderConfig);

if(obj['verifierName']!=null && obj['verifierName'].trim().length==0 )
{
Ext.Msg.alert('系统提示', "验证员姓名不能为空");
return;

}
if(obj['certificationAuthoritiesId']!=null && obj['certificationAuthoritiesId'].trim().length==0 )
{
Ext.Msg.alert('系统提示', "所属机构不能为空");
return;

}

var content = Ext.getCmp('aintroduction').getValue();
obj.introduction = content==null?" ":content;
Ext.getCmp('mainForm').getForm().baseParams = {flag:flag,baseInfo:toString2(obj)};
Ext.getCmp('mainForm').getForm().submit({
success: function(form, action){

var info = action.result;
if(info.success=="true"){
Ext.Msg.alert('信息','添加成功');
}else if(info.success=="updatetrue"){
Ext.Msg.alert('信息','修改成功');
}else{
Ext.Msg.alert('信息','添加失败');
}

},
failure: function(){
Ext.Msg.alert('系统提示', '操作失败,请确保网路畅通！！！');
}
});




}
}
]
})
awin.show(this);

}

function getSubmitValue(gridCmReaderConfig)
{

var obj = {};
for(var i =0;i<gridCmReaderConfig.length;i++)
{
var aobj = gridCmReaderConfig[i];
if(aobj.xtype=='img')continue;
var aformid = "f_"+aobj['tag'];
var tag = aobj['tag'];
var cmp = Ext.getCmp(aformid);
if(!cmp)continue;
if(aobj.xtype=='date')
{

if(cmp) obj[tag] = cmp.getRawValue();

}
else
{

obj[tag] = cmp.getValue()==null?"":cmp.getValue();

}
}
return obj;
}
/****************************end******xby**********************************************************/
function delFn(btn){

delOrpubFn(btn,"del");
}
function pubFn(btn){

delOrpubFn(btn,"pub")
}
function upubFn(btn){

delOrpubFn(btn,"upub")
}


/*************删除,发布,取消发布***************************/
function delOrpubFn(btn,mark)
{

var selsobj = getSeleds();
var ids = selsobj.ids;
var records = selsobj['recs'];
var unames = [];
if(ids.length==0)
{
return;
}
else
{ if(mark=="del"){
Ext.MessageBox.confirm('系统提示', '您确定要删除选中的记录吗？',
function(btn){
if(btn=='yes'){
ajaxDelOrpudFn(ids,selsobj['recs'],unames,mark);
}
}
);
}else{
ajaxDelOrpudFn(ids,selsobj['recs'],unames,mark);
}

}
}

function ajaxDelOrpudFn(ids,records,unames,mark)
{
var selobj = getSeleds();
var params= {
ids:ids.join(","),
unames:unames.join(","),
_json:_json,
type: mark
};
function successfulfn(response){
var json = response.responseText;
json = eval("("+json+")");
if(json["result"]=="true")
{
var grid = Ext.getCmp(gridId);
grid.delRows(records);

}else
{
for(var i=0;i<selobj.recs.length;i++)
{
var record = selobj.recs[i];
if(json["result"]=="pub")
{
record.set( "STATUS","1");
}else if(json["result"]=="upub")
{
record.set( "STATUS","0");
}else if(json["result"]=="del")
{
record.set( "STATUS","2");
}
record.commit();
}

}
}
function faulterFn(response)
{
var vx = response.responseText;

}
var url = basepath+'/admin/validator/delOrpub';

ajaxFn(url,successfulfn,faulterFn,params);

}


/*************************获取Id**************************************/
function getSeleds()
{
var grid = Ext.getCmp(gridId);
var sm = grid.getSelectionModel();
var sels = sm.getSelections();
var ret = {ids:[],recs:[]};

if(sels ==null )return ret;

var ids=[];
for(var i=0;i<sels.length;i++)
{
var r = sels[i];
var nid = r.data["VERIFIER_ID"];
ids.push(nid);
}
ret.ids = ids;
ret.recs = sels;
return ret;
}


/*************查询**************************/
function searchFn()
{ var verifierName = Ext.getCmp("verifierName");
var verifierNameValue=verifierName.getValue();
var status = Ext.getCmp("statusCombo");
statusValue=status.getValue();
var grid = Ext.getCmp(gridId);
var obj = grid.store.baseParams?grid.store.baseParams:{};
obj.status =statusValue;
obj.verifierName = verifierNameValue;
grid.store.baseParams = obj;
grid.store.load({params : {start : 0,limit : pagesize }});
}

function statusName(value) {
if (value == '0') {
return "未发布";
} else if(value == '1') {
return "已发布";
}else if(value == '2') {
return "已删除";
}
}

//日期格式化
function dateFormat(v, cellmeta, record, rowIndex, columnIndex, store)
{
if(!v)return "";
else
{
return new Date(v).format("Y-m-d")
}

}
//重置
function reSetFn()
{
Ext.getCmp('statusCombo').reset();
Ext.getCmp("verifierName").reset();
statusValue="";
}


makeForm.js内容


/**
*
*/
var topLength = 20;
function makeformpanel( cfgobj,data,db2show)
{

var ret = {};
var position = "";
for(var i=0;i<cfgobj.length;i++)
{
var obj = cfgobj[i];
if(typeof obj.position =='undefined')
{
continue;
}
var fieldLable = obj.show;
if(obj['require']==true)fieldLable =obj.show+"(<span style='color:red;'>*</span>)";
var avalue = data[obj.tag]?data[obj.tag]:"";
if(data[obj.tag] =="0")avalue="0";
if(obj.tag.indexOf(".")>-1 &&avalue =="")
{
var tTag = obj.tag.split(".");
if(typeof data[tTag[0]] !== 'undefined')
avalue = data[tTag[0]][tTag[1]];
if(!avalue) avalue = "";
}

if(obj.xtype == 'img' && typeof data[obj.tag] =='undefined')avalue = "#";

position = obj.position;
if(typeof ret[position] =='undefined')
{
ret[position] = [];

}

var field = "";
if(typeof obj.xtype == 'undefined')
{
field =
{
xtype:'textfield',
fieldLabel :fieldLable,
value:avalue
};
if(obj.xwidth)
{
field.width=obj.xwidth;

}
if(obj.readonly)
{
field.readOnly =obj.readonly;

}
}else if( obj.xtype == 'hidden')
{
field =
{
xtype:'hidden',
fieldLabel :fieldLable,
value:avalue,
maxLength:50

};
if(obj.xwidth)
{
field.width=obj.xwidth;

}
}else if(obj.xtype == 'emailcombox'){
field =
{
xtype: 'textfield', //邮箱验证
fieldLabel:fieldLable,
width:obj.xwidth,
value:avalue,
vtype:'email'

};
}
else if(obj.xtype == 'numbercombox'){
field =
{
xtype: 'numberfield', //number验证IPcombox
fieldLabel:fieldLable,
width:obj.xwidth,
//readOnly:true,// obj.readonly,
value:avalue

};
}else if(obj.xtype == 'IPcombox'){
field =
{
xtype: 'textfield', //IPcombox验证
fieldLabel:fieldLable,
width:obj.xwidth,
value:avalue,
regex:/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/

};
}else if(obj.xtype == 'textareacombox'){
field =
{
xtype: 'textarea', //IPcombox验证
fieldLabel:fieldLable,
width:obj.xwidth,
value:avalue
};
}

else if( obj.xtype == 'img')
{
if(avalue == null ||avalue =="")
{
field =
{
xtype: 'panel', //或者xtype: 'component',
html:fieldLable+'没有上传'
};
if(obj.xwidth)
{
field.width=obj.xwidth;

}
}else

field =
{
xtype: 'box', //或者xtype: 'component',
fieldLabel:fieldLable,
width: 300, //图片宽度
height: 200, //图片高度
autoEl: {
tag: 'img', //指定为img标签
src: avalue //指定url路径
}
};
}
else if( obj.xtype == 'topLocal')
{

if(!avalue) avalue = '';
var options = [
['','不置顶']
];
for(var x=1;x<=topLength;x++)
{
options.push([x,x]);
}

field =makeLocalCombox(options,obj,avalue);
field.editable = false;
}else if(obj.xtype=='remoteSiteCombox')
{
var store2 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:basepath+'/admin/certificationbody/authorities'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalRows',
root: 'pageData'
}, [{name:'certificationAuthoritiesId'},{name:'organizationName'}])
});
//store.load();

field = new Ext.form.ComboBox({
store: store2,
id:"f_"+obj.tag,
editable:false,
loadingText : '正在加载信息',//加载数据时显示的提示信息
emptyText: '==所属机构==',
mode: 'remote',
fieldLabel: obj.show+"(<span style='color:red;'>*</span>)", // "所属机构",
triggerAction: 'all',
valueField: 'certificationAuthoritiesId',
displayField: 'organizationName',
pageSize: 10,
width:obj.xwidth,
resizable: true
});


}
else if( obj.xtype == 'commentLocal')
{
if(!avalue) avalue = '0';
var options = [
['0','未发布'],
['1','已发布'],
['2','已删除']
];
field =makeLocalCombox(options,obj,avalue);
field.editable = false;
}else if( obj.xtype == 'isRecommendLocal')
{
if(!avalue) avalue = '0';
var options = [
['0','未推荐'],
['1','已推荐']
];
field =makeLocalCombox(options,obj,avalue);
field.editable = false;
}else if( obj.xtype == 'areaLocal')
{
if(!avalue) avalue = '1';
var options = [
['1','华东地区'],
['2','华南地区'],
['3','华北地区'],
['4','华中地区'],
['5','东北地区'],
['6','西南地区'],
['7','西北地区'],
['8','台湾省'],
['9','香港特别行政区'],
['10','澳门特别行政区'],
];
field =makeLocalCombox(options,obj,avalue);
field.editable = false;
}else if(obj.xtype =='columntree')
{
//field = columntreeFn(obj.xwidth);
var require = true;
var treecombox = agetColumnTreeCombox('acolumnTree','atreeColumnCombo',false,'cId',require);
var field = treecombox['combox'];
field.width =obj.xwidth;
var acolumnTree = treecombox['tree'];
acolumnTree.on('show',function(){
acolumnTree.getRootNode().expand();

});
}else if(obj.xtype=='templetateTree')
{
//var fieldLable =obj.show+"(<span style='color:red;'>*</span>)";
var troot = new Ext.tree.AsyncTreeNode({
text:'所有',
id:'t0',
children: makeTreeNode(templeateTreedata,false)//
});
var telmplateTree = new Ext.tree.TreePanel({
root:troot,
rootVisible:false,
id:"templetateTree",
listeners:{
'beforeclick':function(node,e){
var uri = node.attributes.apath;

if(uri==null || uri ==""||typeof uri ==undefined)
{
e.stopEvent();
return false;
}
}

},
loader: new Ext.tree.TreeLoader()
});

field = new ComboBoxTree({
id:"tempTreeCombo",
readOnly:false,
width :obj.xwidth,
passName:'tId',
allowUnLeafClick:false,//只允许选择叶子
//treeHeight:200,
emptyText:'请选择使用模板',
fieldLabel:fieldLable,
tree:telmplateTree
});

}
else if( obj.xtype == 'date')
{

field =
{
xtype: 'datefield',
fieldLabel:fieldLable ,
value:avalue
};
if(obj.xwidth)
{
field.width =obj.xwidth;

}if(obj.format)
{
field.format = obj.format;
}
}
else if(obj.xtype=='textarea')
{
field={
xtype:'textarea',
fieldLabel :fieldLable,
value:avalue

};
if(obj.xwidth)
{
field.width=obj.xwidth;

}

}
field.id="f_"+obj.tag;
field.name=obj.tag;
if(typeof obj.xorder !='undefined')
{
field.xorder = obj.xorder;

}
ret[position].push(field);
}

return ret;
}

/*function xmakeLocalCombox(data,obj,avalue)
{

var store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data : data
});

var combo ={
store: store,
xtype:'combo',
// id :"f_"+obj.tag,
value:avalue,
fieldLabel :obj.show ,
width:obj.xwidth,
emptyText: '===请选择===',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
};
return combo;

}*/

function makeLocalCombox(data,obj,avalue)
{

var store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data : data
});

var combo = {
store: store,
xtype:'combo',
// id :"f_"+obj.tag,
value:avalue,
fieldLabel :obj.show ,
width:obj.xwidth,
emptyText: '===请选择===',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
};
return combo;

}

function sortNumber(a,b)
{
return a.xorder - b.xorder;
}