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,
    widthbj.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,
        fieldLabelbj.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,
        fieldLabelbj.show ,
        width:obj.xwidth,
        emptyText: '===请选择===',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text'
    };
    return combo;

}

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