`
taiyang.yu
  • 浏览: 18674 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

EXT2.2完整页面JS

阅读更多
/*
联系人信息展示,添加,查询,删除
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'ext-2.3.0/resources/images/default/tree/s.gif';
Ext.QuickTips.init();
var actionName = "contactInfo";//对应的是Struts配置文件里面的路径
var methodName = "pageQueryContactInfoAll";
/***********************************删除事件*******************************************/
var  removeUrl=String.format("/skyBook/{0}.do?method={1}",actionName,"deleteContactInfo");
var deleteCont=function(){
//获得用户选择的复选框id
var rows=gridPanel.getSelectionModel().getSelections();
if(rows.length == 0){
Ext.MessageBox.alert('提示信息','请选择要删除的行');
return;
}
Ext.Msg.alert('提示','复习框的值为'+rows);
Ext.MessageBox.confirm('提示信息','确定删除选中的联系人信息?',function(btn){
if(btn=='yes'){
var jsonArray=[];
Ext.each(rows,function(item){
jsonArray.push(item.get('conId'));
});
var params = {};
params.deleteId = jsonArray.join(',');
//console.info(jsonArray.join(",")); 测试时使用的输出代码
//发送 ajax 请求
Ext.Ajax.request({method:'POST',
url: removeUrl,
params: params,
success: (function(response) {
var result = Ext.decode(response.responseText);
//console.dir(result.success);
if (result.success) {
//Ext.Msg.alert('提示','联系人信息以成功删除!',function(){
gridPanel.store.reload();
//});
}else
Ext.MessageBox.alert('错误信息', '操作失败,请重试..');
}),
scope: this
});
}
},this);
}
//删除按钮
var btn_delCont=new Ext.Button({
text:'删除联系人',
iconCls:'deletelist',
handler:deleteCont
});
/*************************************搜索事件*****************************************/
//根据内容查询联系人
var searchCont=function(){
//得到文本框中的值,然后根据内容查找
var queryParam={};
var nameSearch=text_search_Cont.getValue();
if(!Ext.isEmpty(nameSearch.trim())){
gridStores.load({params:{start:0,limit:20,contconName:nameSearch}});
}else{
gridStores.load({params:{start:0,limit:20}});
}
};
//搜索框
var text_search_Cont=new Ext.form.TextField({
id:'crm_text_search_cont',
width:200,
emptyText:'输入搜索条件,回车键开始查询!',
listeners : {
'specialkey' : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
searchCont();
}
}
}
});


/********************************下拉列表数据集**************************************/
/**用于添加时**/
var queryDataURL = "/skyBook/configInfo.do?method=querySysBasicDataByTpye&type={0}"
var sexStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,18)//性别数据
})
});
//性别
var comb_sex=new Ext.form.ComboBox({
fieldLabel:'性别',
name:'sex',
store:sexStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

//联系人类型
var contTypeStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,12)
})
});
var comb_contType=new Ext.form.ComboBox({
fieldLabel:'联系人类别',
name:'contType',
store:contTypeStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

//职业
var occupationStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,23)
})
});
var comb_occupation=new Ext.form.ComboBox({
fieldLabel:'职业',
name:'occupation',
store:occupationStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//职位
var appointmentStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,22)//职位数据
})
});
var comb_appointment=new Ext.form.ComboBox({
fieldLabel:'职位',
name:'appointment',
store:appointmentStores,
displayField:'value',
valueField:'value',
typeAhead:true,
readOnly:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//职称
var professionTitleStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,21)//职称数据
})
});
var comb_professionTitle=new Ext.form.ComboBox({
fieldLabel:'职称',
name:'professionTitle',
store:professionTitleStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//城市
var cityStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,6)//城市数据
})
});
var comb_city=new Ext.form.ComboBox({
fieldLabel:'城市',
name:'city',
store:cityStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//民族下拉列表
var nationStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,13)//民族数据
})
});
var comb_nation=new Ext.form.ComboBox({
fieldLabel:'民族',
name:'nation',
store:nationStores,
displayField:'value',
valueField:'value',
typeAhead:true,
readOnly:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

//开户银行下拉列表
var brank1Stores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,20)//开户银行数据
})
});
var comb_brank1=new Ext.form.ComboBox({
fieldLabel:'开户银行',
name:'brank1',
store:brank1Stores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});
/***用于修改时***/

//性别
var sexStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,18)
})
});
var comb_sex2=new Ext.form.ComboBox({
fieldLabel:'性别',
name:'sex',
store:sexStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

//联系人类型
var contTypeStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,12)
})
});
var comb_contType2=new Ext.form.ComboBox({
fieldLabel:'联系人类别',
name:'contType',
store:contTypeStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

//职业
var occupationStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,23)
})
});
var comb_occupation2=new Ext.form.ComboBox({
fieldLabel:'职业',
name:'occupation',
store:occupationStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//职位
var appointmentStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,22)
})
});
var comb_appointment2=new Ext.form.ComboBox({
fieldLabel:'职位',
name:'appointment',
store:appointmentStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//职称
var professionTitleStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,21)
})
});
var comb_professionTitle2=new Ext.form.ComboBox({
fieldLabel:'职称',
name:'professionTitle',
store:professionTitleStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//城市下拉列表
var cityStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,6)
})
});
var comb_city2=new Ext.form.ComboBox({
fieldLabel:'城市',
name:'city',
store:cityStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//民族
var nationStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,13)
})
});
var comb_nation2=new Ext.form.ComboBox({
fieldLabel:'民族',
name:'nation',
store:nationStores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});


//开户银行
var brank1Stores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:String.format(queryDataURL,20)
})
});
var comb_brank12=new Ext.form.ComboBox({
fieldLabel:'开户银行',
name:'brank1',
store:brank1Stores,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true
});

/********************************添加联系人***********************************/
//FormPanel
var from_add_cont=new Ext.FormPanel({
labelWidth:100,
border:false,
width:430,
items:[{
xtype:'tabpanel',
activeTab:0,
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
items:[
{
layout:'form',
title: '基本资料',
            defaultType: 'textfield',
           defaults: {width: 300},
           items:[ {
    fieldLabel: '联系人名称',
    name: 'conName',
    id: 'conName'
},
comb_sex,
{
    fieldLabel: '公司',
    name: 'cusName',
    id: 'cusName'
},comb_contType,//联系人类型
comb_occupation,//职业
comb_appointment,//职位
comb_professionTitle,//职称
{
    fieldLabel: '电话',
    name: 'telphone',
    xtype:'numberfield',
    id: 'telphone'
},
{
    fieldLabel: '手机',
    xtype:'numberfield',
    name: 'phone'
},
{
    fieldLabel: '电子邮件',
    vtype:'email',
    name: 'email'
},
{
    fieldLabel: '生日',
    xtype:'datefield',
    format:'Y-m-d',
    value: new Date(),
    name: 'birthday',
    readOnly:true
},comb_city
,
{
    fieldLabel: '邮编',
    name: 'zcode'
},
{
    fieldLabel: '地址',
    name: 'address'
}]
           },{
           layout:'form',
title: '其他资料',
            defaultType: 'textfield',
           defaults: {width: 300},
           items:[
              {
    fieldLabel: '兴趣爱好',
    name: 'interests',
    id: 'interests'
},
{
    fieldLabel: '首次联系时间',
    xtype:'datefield',
    format:'Y-m-d',
    value: new Date(),
    name: 'firstDate',
    readOnly:true
},
{
    fieldLabel: '最近联系时间',
    xtype:'datefield',
    value: new Date(),
    format:'Y-m-d',
    name: 'zjDatev',
    readOnly:true
},
{
    fieldLabel: '年薪',
    name: 'yearMoney'
},
{
fieldLabel:'籍贯',
name:'jiguan'
}
,
comb_nation,
{
           fieldLabel: '配偶名称',
                   name: 'marryname'
           },
{
    fieldLabel: '传真',
    name: 'fax'
},
{
    fieldLabel: '主页',
    name: 'zhuye'
},
comb_brank1,
{
    fieldLabel: '银行账号',
    xtype:'numberfield',
    name: 'brankId'
},
{
    fieldLabel: 'QQ',
    name: 'qq'
},
{
    fieldLabel: '录入时间',
    xtype:'datefield',
    value: new Date(),
    format:'Y-m-d',
    name: 'writtdate',
    readOnly:true
},
{
    fieldLabel: '录入者',
    name: 'writtmen'
}]
           },{
           layout:'form',
title: '备注',
            defaults: {width: 300},
                items: [{
                fieldLabel:'备注',
                height:380,
                name:'remark',
                xtype:'textarea'
                }]
         }]
}]
});

//window
var wid_add_cont=new Ext.Window({
title:'新增联系人',
width:500,
layout:'fit',
height:500,
closeAction:'hide',
plain:true,
bodyStyle:'padding:5px 5px 5px 5px',
items:[from_add_cont],
buttons:[{
text:'保存',
handler:function(){
if(!Ext.getCmp('conName').getValue()){
Ext.MessageBox.alert("提示","联系人不能为空,请填写!");
}else if(!comb_sex.getValue()){
Ext.MessageBox.alert("提示","请选择性别");
}else if(!Ext.getCmp('cusName').getValue()){
Ext.MessageBox.alert("提示","所在公司不能为空,请填写");
}else if(!comb_contType.getValue()){
Ext.MessageBox.alert("提示","请选择联系人类别");
}else if(!Ext.getCmp('telphone').getValue()){
Ext.MessageBox.alert("提示","请填写联系电话");
}else if(!Ext.getCmp('interests').getValue()){
Ext.MessageBox.alert("提示","兴趣爱好不能为空,请填写");
}else{
//获得表单的提交信息,可以添加联系人信息
var PostVal=from_add_cont.getForm().getValues();//获得提交的数据
Ext.Ajax.request({
url:"/skyBook/contactInfo.do?method=saveContactInfo",
success:function(response,opts){
     var action=Ext.decode(response.responseText);
     //console.dir(action);
     if(action.success==true){
      // Ext.Msg.alert('提示','添加联系人成功!',function(){
      from_add_cont.getForm().reset();
      wid_add_cont.hide();
      gridPanel.store.reload();
      // });
      }
      else{
      Ext.Msg.alert('提示','添加信息失败,请重试...');
      }
},
params:PostVal
});
}
  }
},{
text:'取消',
handler:function(){
//添加数据表单隐藏
from_add_cont.getForm().reset();
//添加联系人的窗口要隐藏
                 wid_add_cont.hide();
                 //表格数据重新加载
            gridPanel.store.reload();
}
  }]
});
var insertCont=function(){
wid_add_cont.show();
}
//添加按钮
var btn_addCont=new Ext.Button({
id:'btn_addCont_form',
text:'添加联系人',
iconCls:'addlist',
handler:insertCont
});


/**********************************图片上传事件*********************************/
//图片上传
var dialog = null;
var fileUploadFn = function(){
if(dialog == null){
  dialog = new Ext.ux.UploadDialog.Dialog({ 
           autoCreate: true, 
           closable: true, 
           collapsible: false, 
           draggable: true, 
           minWidth: 400,       
           minHeight: 200, 
           width: 400, 
           height: 350, 
           permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'],  //设置上传文件类型
           proxyDrag: true, 
           resizable: true, 
           constraintoviewport: true, 
           title: '照片上传',
           url:'/skyBook/contactInfo.do?method=testUploadFile',  //调用的Action
           reset_on_hide: false, 
           allow_close_on_upload: true 
         });
        dialog.on( 'uploadsuccess', fireUploadSuccessEvent); //注册上传成功事件
        dialog.on( 'uploadcomplete', onUploadComp); //注册上传完成事件
         }
          dialog.show();
}
//上传成功事件,用于取得上传成功的图片名称
var imageURL ='';
var fireUploadSuccessEvent = function(fileUpload,data,record){
var success=record.success;
//alert(success);
var image=record.filePaths;
//alert('上传成功的路径:'+image);
if(success==true&&image!=null){
imageURL=imageURL+image+",";
}else{
Ext.Msg.alert('提示','上传文件成功了,但是没有取到相关信息!');
return;
}
}

var updateURL="/skyBook/contactInfo.do?method=fileUpload&conId={0}&images={1}";
//上传完成事件,用于更改数据库中的照片名称
var onUploadComp=function(){
//alert('上传完成之后的照片集合'+imageURL);
var rows=gridPanel.getSelectionModel().getSelections();
var record = rows[0];
var conId = record.get('conId');
Ext.Ajax.request({
method:'POST',
url:String.format(updateURL,conId,imageURL),
success:function(response,opts){
     var action=Ext.decode(response.responseText);
     //console.dir(action);
     if(action.success==true){
     Ext.Msg.alert('提示','上传照片成功!',function(){
     imageURL='';
//dialog.hide();//隐藏上传dialog
dialog.onCloseButtonClick();//可以调用关闭按钮的函数
dialog.onResetButtonClick();//可以调用重置按钮事件
gridPanel.store.reload();//重新加载数据
      });
   }else{
      Ext.Msg.alert('提示','上传照片失败,请重试...');
   }
}
});
}

  var onUploadComplete = function(){
  //获取被选择的联系人
  var rows=gridPanel.getSelectionModel().getSelections();
if(rows.length == 0){
Ext.MessageBox.alert('提示','请选择需要上传图片的联系人');
return;
}
if(rows.length > 1){
Ext.MessageBox.alert('提示','每次只能给一个联系人上传图片');
return;
}
if(rows.length==1){
//得到联系人ID
var conId=rows[0].get('conId');
//获取上传成功的照片名称
fileUploadFn();
}
   }
   //图片上传按钮
var btn_uploadFile=new Ext.Button({
id:'btn_uploadFile',
text:'图片上传',
iconCls:'blist',
handlernUploadComplete
});
/**********************************修改事件*************************************/
//图片下拉列表
var imagesStores=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:"/skyBook/contactInfo.do?method=getImages"
})
});
var comb_images=new Ext.form.ComboBox({
fieldLabel:'照片信息',
name:'imag',
store:imagesStores,
displayField:'value',
valueField:'value',
typeAhead:true,
readOnly:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true,
listeners : {
"change" : function(combo,newValue,oldValue){
alert(newValue);
var imageCmp = Ext.get('comComp');
imageCmp.dom.src ='../uploadtest/'+ newValue;
imageCmp.reload();
Ext.getCmp('comComp').reload();
    //这里边combo就是指这个事件的源 newValue就是change后的值 oldValue是change前的值
}
}
});
imagesStores.reload();
var handleActivate=function(){
if(updateFormvalue!={}){
from_update_cont.getForm().setValues(updateFormvalue);
from_find_cont.getForm().setValues(updateFormvalue);
}
}
var updateFormvalue={};
var imagesId = -1;
//修改按钮
var getContInfoUrl=String.format("/skyBook/{0}.do?method={1}",actionName,"getContactInfo");
var updateCont=function(){
var rows=gridPanel.getSelectionModel().getSelections();
if(rows.length == 0){
Ext.MessageBox.alert('提示','请选择需要修改的联系人');
return;
}
if(rows.length > 1){
Ext.MessageBox.alert('提示','每次只能修改一个联系人信息');
return;
}
if(Ext.get('comComp')!=null){
Ext.get('comComp').dom.src='../uploadtest/MG100603103406238.gif';
}

var params = {};
params.id=rows[0].get('conId');
imagesId=rows[0].get('conId');
//alert(imagesId);
imagesStores.reload();
Ext.Ajax.request({
method:'POST',
url:getContInfoUrl,
params:params,
success:(function(response){
var result=Ext.decode(response.responseText);
if(result.success){
updateFormvalue=result.rows[0];
wid_update_cont.show('btn_uptCont_form');
from_update_cont.getForm().setValues(updateFormvalue);
}else
  Ext.MessageBox.alert('错误信息','操作失败,请重试...');
}),
failure:function(response,options){
updateFormvalue={};
imagesId=-1;
Ext.MessageBox.alert('警告','出现异常错误!请联系管理员!');
},
scope:this
});
//console.dir(imagesId);
};
//修改联系人的Panel
var from_update_cont=new Ext.FormPanel({
labelWidth:100,
border:false,
width:430,
items:[{
xtype:'tabpanel',
activeTab:0,
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
items:[
{
layout:'form',
title: '基本资料',
            defaultType: 'textfield',
           defaults: {width: 300},
           items:[           
           {
    fieldLabel: '联系人名称',
    name: 'conName'    
},
comb_sex2,
{
    fieldLabel: '公司',
    name: 'cusName'
},comb_contType2,
comb_occupation2,
comb_appointment2,
comb_professionTitle2,
{
    fieldLabel: '电话',
    xtype:'numberfield',
    name: 'telphone'
   
},
{
    fieldLabel: '手机',
    xtype:'numberfield',
    name: 'phone'
},
{
    fieldLabel: '电子邮件',
    vtype:'email',
    name: 'email'
},
{
    fieldLabel: '生日',
    xtype:'datefield',
    format:'Y-m-d',
    name: 'birthday',
    readOnly:true
},comb_city2
,
{
    fieldLabel: '邮编',
    name: 'zcode'
},
{
    fieldLabel: '地址',
    name: 'address'
}]
           },{
           layout:'form',
title: '其他资料',
            defaultType: 'textfield',
            listeners:{activate:handleActivate},
           defaults: {width: 300},
           items:[
              {
    fieldLabel: '兴趣爱好',
    name: 'interests'
},
{
    fieldLabel: '首次联系时间',
    xtype:'datefield',
    format:'Y-m-d',
    name: 'firstDate',
    readOnly:true
},
{
    fieldLabel: '最近联系时间',
    xtype:'datefield',
    format:'Y-m-d',
    name: 'zjDatev',
    readOnly:true,
    listeners:{
    'focus':function(){
    this.onTriggerClick();
    }
    }
},
{
    fieldLabel: '年薪',
    name: 'yearMoney'
},
{
fieldLabel:'籍贯',
name:'jiguan'
}
,
comb_nation2,
{
           fieldLabel: '配偶名称',
                   name: 'marryname'
           },
{
    fieldLabel: '传真',
    name: 'fax'
},
{
    fieldLabel: '主页',
    name: 'zhuye'
},
comb_brank12,
{
    fieldLabel: '银行账号',
    name: 'brankId'
},
{
    fieldLabel: 'QQ',
    name: 'qq'
},
{
    fieldLabel: '录入时间',
    xtype:'datefield',
    format:'Y-m-d',
    name: 'writtdate',
    readOnly:true
},
{
    fieldLabel: '录入者',
    name: 'writtmen'
}]
           },{
           layout:'form',
  title:'照片',
  defaultType:'textfield',
  listeners:{activate:handleActivate},
  defaults:{width:300},
  items:[/*{
  fieldLabel:'照片',
  name:'images',
  hidden: true,//隐藏
hideLabel:true  
  },
  */ comb_images,
  {
    id:'comComp',
    name:'comComp',   
              fieldLabel:'照片',
              autoCreate:{    
                   width : 100, 
                  height: 260, 
                  tag: 'input',    
                   type: 'image',    
                   src: '../uploadtest/MG100603103406238.gif',    
                  style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'   
               }                         
  }]
           },{
           layout:'form',
title: '备注',
            defaults:{width: 300},
            listeners:{activate: handleActivate},
                items: [{
                fieldLabel:'备注',
                height:380,
                name:'remark',
                xtype:'textarea'
                }]
         }]
}]
});
var wid_update_cont = new Ext.Window({
title :'修改联系人',
width       : 500,
layout      : 'fit',
height      : 500,
closeAction :'hide',
plain       : true,
bodyStyle:'padding:5px 5px 5px 5px',
items:[from_update_cont],
       buttons: [{
           text: '保存',
           handler:function(){
            var PostVal = from_update_cont.getForm().getValues();  //获得提交数据
   if(updateFormvalue.conId==''||updateFormvalue.conId==null){
   Ext.Msg.alert('提示','请重新选择修改对象.请重试...');
   return null;
   }
   PostVal.conId=updateFormvalue.conId;
   Ext.Ajax.request({   
      url:"/skyBook/contactInfo.do?method=updateContactInfo",
     params : PostVal,
        success:function(response, opts){
          var action = Ext.decode(response.responseText);
          // console.dir(action);
            if(action.success == true){
  //Ext.Msg.alert('提示','修改联系人成功!',function(){
  imagesId=-1;//修改成功的时候情况全局
  updateFormvalue={};
from_update_cont.getForm().reset();
wid_update_cont.hide();
gridPanel.store.reload();
// });
}else{  
imagesId=-1;//修改成功的时候清空全局
Ext.Msg.alert('失败','修改失败.请重试...');       
  }
       }
    });
           }
        },{
            text: '取消',
          handler:function(){
          from_update_cont.getForm().reset();
                 wid_update_cont.hide();
          imagesId=-1;
          comb_images.clearValue();
          updateFormvalue={};         
            gridPanel.store.reload();
            }
        }]
});

//修改按钮
var btn_udpCont=new Ext.Button({
id:'btn_uptCont_form',
text:'修改联系人',
iconCls:'edtlist',
handler:updateCont
});


/**************************查看详细资料************************/

var imagesSt=new Ext.data.JsonStore({
totalProperty:'results',
root:'rows',
fields:[{name:'id'},
{name:'value'},
{name:'remark'}],
proxy:new Ext.data.HttpProxy({
url:"/skyBook/contactInfo.do?method=getImages"
})
});
var comb_images1=new Ext.form.ComboBox({
fieldLabel:'照片信息',
name:'imag',
store:imagesSt,
displayField:'value',
valueField:'value',
readOnly:true,
typeAhead:true,
forceSelection: true,
mode:'remote',
triggerAction:'all',
emptyText:'请选择...',
selectOnFocus:true,
listeners : {
"change" : function(combo,newValue,oldValue){
var imageCmp = Ext.get('comComponent');
imageCmp.dom.src="";
imageCmp.dom.src = '../uploadtest/'+ newValue;
//imageCmp.reload();
Ext.getCmp('comComponent').reload();
    //这里边combo就是指这个事件的源 newValue就是change后的值 oldValue是change前的值
}
}
});
imagesSt.reload();
//发送和接收请求
var findCont=function(){
var rows=gridPanel.getSelectionModel().getSelections();
if(rows.length == 0){
Ext.MessageBox.alert('提示','请选择联系人');
return;
}
if(rows.length > 1){
Ext.MessageBox.alert('提示','每次只能查看一个联系人信息');
return;
}
if(Ext.get('comComponent')!=null){
Ext.get('comComponent').dom.src='../uploadtest/MG100603103406238.gif';
}
var params = {};
params.id=rows[0].get('conId');
imagesId=rows[0].get('conId');
imagesSt.reload();
Ext.Ajax.request({
method:'POST',
url:getContInfoUrl,
params:params,
success:(function(response){
var result=Ext.decode(response.responseText);
if(result.success){
updateFormvalue=result.rows[0];
wid_find_cont.show('btn_findCont_form');
from_find_cont.getForm().setValues(updateFormvalue);
}else
  Ext.MessageBox.alert('错误信息','操作失败,请重试...');
}),
failure:function(response,options){
updateFormvalue={};
imagesId=-1;
Ext.MessageBox.alert('警告','出现异常错误!请联系管理员!');
},
scope:this
});
};
//form
var from_find_cont=new Ext.FormPanel({
labelWidth:100,
border:false,
width:430,
items:[{
xtype:'tabpanel',
activeTab:0,
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
items:[
{
layout:'form',
title: '基本资料',
            defaultType: 'textfield',
           defaults: {width: 300},
           items:[           
           {
    fieldLabel: '联系人名称',
    name: 'conName',
    readOnly:true    
},
{
fieldLabel:'性别',
name:'sex',
    readOnly:true
},
{
    fieldLabel: '公司',
    name: 'cusName',
    readOnly:true
},
{
fieldLabel: '联系人类型',
    name: 'contType',
    readOnly:true
    },
    {
    fieldLabel: '职业',
    name: 'occupation',
    readOnly:true
},
{  
fieldLabel: '职位',
    name: 'appointment',
    readOnly:true
},
{
fieldLabel: '职称',
    name: 'professionTitle',
    readOnly:true
},
{
    fieldLabel: '电话',
    name: 'telphone',
    readOnly:true
},
{
    fieldLabel: '手机',
    name: 'phone',
    readOnly:true
},
{
    fieldLabel: '电子邮件',
    name: 'email',
    readOnly:true
},
{
    fieldLabel: '生日',    
    name: 'birthday',
    readOnly:true
},
{
fieldLabel: '城市',    
    name: 'city',
    readOnly:true
},
{
    fieldLabel: '邮编',
    name: 'zcode',
    readOnly:true
},
{
    fieldLabel: '地址',
    name: 'address',
    readOnly:true
}]
           },{
           layout:'form',
title: '其他资料',
            defaultType: 'textfield',
            listeners:{activate:handleActivate},
           defaults: {width: 300},
           items:[
              {
    fieldLabel: '兴趣爱好',
    name: 'interests',
    readOnly:true
},
{
    fieldLabel: '首次联系时间',
    name: 'firstDate',
    readOnly:true
},
{
    fieldLabel: '最近联系时间',
    name: 'zjDatev',
readOnly:true
},
{
    fieldLabel: '年薪',
    name: 'yearMoney',
    readOnly:true
},
{
fieldLabel:'籍贯',
name:'jiguan',
    readOnly:true
},
{
fieldLabel:'民族',
name:'nation',
    readOnly:true
},
{
           fieldLabel: '配偶名称',
                   name: 'marryname',
    readOnly:true
           },
{
    fieldLabel: '传真',
    name: 'fax',
    readOnly:true
},
{
    fieldLabel: '主页',
    name: 'zhuye',
    readOnly:true
},
{
fieldLabel: '开户银行',
    name: 'brank1',
    readOnly:true

},
{
    fieldLabel: '银行账号',
    name: 'brankId',
    readOnly:true
},
{
    fieldLabel: 'QQ',//日期选择框
    name: 'qq',
    readOnly:true
},
{
    fieldLabel: '录入时间',
    name: 'writtdate',
    readOnly:true
},
{
    fieldLabel: '录入者',
    name: 'writtmen',
    readOnly:true
}]
           },{
           layout:'form',
  title:'照片',
  defaultType:'textfield',
  listeners:{activate:handleActivate},
  defaults:{width:300},
  items:[{
  fieldLabel:'照片',
  name:'images',
  hidden: true,//隐藏
hideLabel:true  
  },
  comb_images1,
  {
    id:'comComponent',    
    name:'comComponent',    
              fieldLabel:'照片',
              autoCreate:{    
                   width : 100, 
                  height: 260, 
                  tag: 'input',    
                   type: 'image',    
                   src:  '../uploadtest/MG100603103406238.gif',//    
                  style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'   
               }                         
  }]
           },{
           layout:'form',
title: '备注',
            defaults:{width: 300},
            listeners:{activate: handleActivate},
                items: [{
                fieldLabel:'备注',
                height:380,
                name:'remark',
                xtype:'textarea',
readOnly:true
}]
         }]
}]
});
//window
var wid_find_cont=new Ext.Window({
title :'查看联系人',
width       : 500,
layout      : 'fit',
height      : 500,
closeAction :'hide',
plain       : true,
bodyStyle:'padding:5px 5px 5px 5px',
items:[from_find_cont],
       buttons: [{
           text: '修改联系人信息',
           handler:function(){
           updateFormvalue={};
           wid_find_cont.hide();                    
           from_find_cont.getForm().reset();
                 updateCont();
           }
        },{
            text: '退出',
          handler:function(){
          imagesId=-1;
          //comb_images.clearValue();
          imagesStores
          updateFormvalue={};         
           from_find_cont.getForm().reset();
                 wid_find_cont.hide();
            gridPanel.store.reload();
            }
        }]
});

//查看详细按钮
var btn_conContent=new Ext.Button({
id:'btn_findCont_form',
text:'查看详细信息',
iconCls:'selectlist',
handler:findCont
});



/*****************************图表分析***********************************/
  
var btn_images=new Ext.Button({
id:'btn_images_form',
text:'图表分析',
handler:function(){
window.open("MyJsp.jsp","new");
}
})
/*****************************数据表格的数据展示***********************************/
//给gridPanel配置数据源
var gridStores = new Ext.data.JsonStore({
totalProperty: 'results',
root:'rows',
fields:[
{name:'conId'},//联系人编号ID hiddle column
{name:'conName'},//联系人名称
{name:'sex'},//性别
{name: 'cusName'},//联系人公司
{name: 'contType'},//联系人类型
{name: 'occupation'},//职业
{name:'appointment'},//职位
{name: 'telephone'},//电话
{name: 'phone'},//手机 
{name: 'fax'},//传真
{name: 'email'}//电子邮件 
    ],
proxy: new Ext.data.HttpProxy({
url :String.format("/skyBook/{0}.do?method={1}",actionName,methodName)
})
});
var cb=new Ext.grid.CheckboxSelectionModel();//创建选择模式对象
var gridPanel=new Ext.grid.GridPanel({//表格组件
frame:true,
title:"联系人信息展示面板",
tbar:[btn_addCont,btn_conContent,btn_udpCont,btn_delCont,btn_uploadFile,text_search_Cont,btn_images],//顶部工具栏,调用上面定义号的工具栏对象
StripeRows:true,//显示斑马线
autoScroll:true,
viewConfig:{
autoFill:true
},
sm:cb,
store:gridStores,//配置数据集
columns:[
new Ext.grid.RowNumberer({
header:'行号',
width:40
}),
cb,//在表中显示复选框
{ fieldLabel:'编号',
  name:'conId',
  hidden: true,//隐藏
hideLabel:true
},
    { header:'联系人名称',
    width:70,
       sortable : true,
      dataIndex : 'conName'
},
{ header:'性别',
width:30,
sortable:true,
dataIndex:'sex'
},
{ header:'联系人公司',
width:70,
sortable:true,
dataIndex:'cusName'
},
{ header:'联系人类型',
width:70,
sortable:true,
dataIndex:'contType'
},
{ header:'职业',
width:70,
sortable:true,
dataIndex:'occupation'
},
{ header:'职位',
width:70,
sortable:true,
dataIndex:'appointment'
},
{ header:'电话',
width:70,
sortable:true,
dataIndex:'telephone'
},
{ header:'手机',
width:70,
sortable:true,
dataIndex:'phone'
},
{ header:'传真',
width:70,
sortable:true,
dataIndex:'fax'
},
{
header:'电子邮件',
width:70,
sortable:true,
dataIndex:'email'
}],
bbar:new Ext.PagingToolbar({
pageSize : 20,
store : gridStores,
displayInfo : true,
displayMsg : '第 {0} - {1} 条  共 {2} 条',
emptyMsg : "没有记录"
})
});
gridPanel.addListener('rowcontextmenu', rightClickFn);


var rightClick = new Ext.menu.Menu({
    id:'rightClickCont',
    items: [
    {xtype:"button",text:"查看",icon:"../images/select.png",pressed:true,handler:findCont},
                {xtype:"button",text:"添加",icon:"../images/add.png",pressed:true,handler:insertCont},
                {xtype:"button",text:"编辑",icon:"../images/udp.png",pressed:true,handler:updateCont},
                {xtype:"button",text:"删除",icon:"../images/DEL.png",pressed:true, handler:deleteCont}
    ]
});

//右键菜单代码关键部分
function rightClickFn(grid,rowindex,e){
   e.preventDefault();
   rightClick.showAt(e.getXY());
}
//页面加载
gridStores.load({params:{start:0,limit:20}}); //加载数据
var viewport = new Ext.Viewport({
layout:'border',
border: false,
items:[{
region:'center',
layout:'fit',
border: false,
items:[gridPanel]
}]
});
//gridPanel选择模式注册一个行选择事件,
gridPanel.getSelectionModel().on('rowselect',function(model,rowIndex,record){
imagesId = record.get('conId');
/*1.apply:将{}中的参数拷贝到imgaesStores.baseParams中去
baseParams是store的属性,用来设置http请求参数*/
Ext.apply(imagesStores.baseParams,{'imgId':imagesId});
Ext.apply(imagesSt.baseParams,{'imgId':imagesId});
imagesId=-1;
  // imagesStores.reload();
});


});
分享到:
评论

相关推荐

    Ext2.2开发指南--完整翻写Ext官方网站学习指南介绍

    唉,当然他们说英文不好懂,于是,我就看完了Ext官方网站的介绍,然后把该网站介绍--Ext2.0开发指南完整翻写成了简体中文,并且使用Ext2.2调试出来,因为--该官方网站给出的是Ext 2.0版本,有的代码跑不出来,比如...

    ext-2.2.rar

    ext-2.2里面集成了许多已经封装好的JavaScript特效如果你想让你的页面更美观,用它没错!

    Ext3.1 21款精美主题和动态换皮肤

    <script type="text/javascript" src="ext/2.0/adapter/ext/ext-base.js"> <script type="text/javascript" src="ext/2.0/ext-all.js"> <!-- 下面这行 --> ...

    Ext+JS高级程序设计.rar

    2.2 系统设计 28 2.3 功能结构图 29 2.4 开发与运行环境 31 2.5 数据库设计 31 2.6 本章小结 34 第3章 Ext Core实例—.NET语言实现 35 3.1 创建应用并设置开发环境 35 3.2 自定义Membership提供程序 37 3.3 创建母版...

    Ext Js权威指南(.zip.001

    2.2 配置使用ext js库 / 35 2.3 编写“hello world”程序 / 37 2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / 60 2.9 为本书示例准备...

    精通JS脚本之ExtJS框架.part1.rar

    15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例...

    EXT2.0中文教程

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...

    Ext 开发指南 学习资料

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...

    EXT教程EXT用大量的实例演示Ext实例

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者...

    精通JS脚本之ExtJS框架.part2.rar

    15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例...

    Ext2 纯净库 直接放入WebRoot中页面引用使用

    下载后直接放在WebRoot 里边,然后引用到对应的JS和CSS就行了

    ExtAspNet_v2.3.2_dll

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    log4Net详解(共2讲)

    Extjs在经过两年的发展,Ext JS从2.0版开始,越来越受用户欢迎,今年,Extjs不但推出3.0版本,而且还推出了Ext Core,准备在Web2.0网站开发中占一席之地,如在 Extjs2.x版本中为人所诟病的速度问题在ExtJs3.0中有所...

    KODExplorer 芒果云-资源管理器

    [关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data...

Global site tag (gtag.js) - Google Analytics