`
taiyang.yu
  • 浏览: 19104 次
  • 性别: 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中文帮助文档

    EXT2.2的核心是EXT JS库,一个强大的JavaScript库,提供了丰富的组件系统、数据绑定机制以及灵活的布局管理。EXT2.2的API中文版是开发人员在进行AJAX应用开发时的重要参考资料。 **EXT JS库** EXT JS库是EXT2.2的...

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

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

    ext2.2 oozie

    EXT2.2,作为一个JavaScript库,很可能是EXT JS的一个特定版本。EXT JS是一个用于构建富互联网应用程序(RIA)的前端框架,它提供了一套完整的组件模型,包括数据绑定、拖放功能、高级图表以及强大的布局管理器。EXT...

    EXT2.2开发环境

    EXT2.2是一种基于JavaScript的前端开发框架,主要用于构建富客户端Web应用。它以其强大的组件化功能、丰富的UI控件和高效的性能而受到开发者们的欢迎。EXT2.2的开发环境搭建是学习EXTJS框架的基础步骤,对于深入理解...

    Ext2.2 中文手册

    ### Ext2.2 中文手册知识点总结 #### 1. Ext简介 - **定义与特点**:Ext 是一款基于 JavaScript 的开源框架,用于构建复杂的 Web 应用程序。它提供了丰富的用户界面组件、强大的 DOM 操作能力和简洁的 API 设计。...

    EXT_中文手册 +Ext2.2API中文版(最终完成版).CHM

    8. **图表(Charts)**:EXT2.2引入了图表组件,支持多种图表类型,如柱状图、折线图、饼图等,用于数据可视化。 9. **Ajax通信**:EXT提供了异步通信的API,如`Ext.Ajax`,可以方便地进行JSONP、XMLHttpRequest等...

    ext2.2demo

    EXT2.2是一款基于JavaScript的开源富因特网应用程序(RIA)框架,由Sencha公司开发,它提供了丰富的用户界面组件和强大的数据管理功能,特别适用于构建复杂的、交互性强的Web应用程序。在本文中,我们将深入探讨EXT...

    ext-2.2.rar

    EXT是JavaScript库Ext JS的简称,它是一款强大的前端开发框架,专用于构建富客户端Web应用程序。EXT 2.2是该框架的一个稳定版本,发布于2008年,为开发者提供了丰富的组件、布局管理和数据绑定功能。在本文中,我们...

    Ext2.2 实例和官方文档

    Ext2.2是一个广泛使用的JavaScript库,主要用于构建富互联网应用程序(RIA)。这个库以其强大的组件模型和丰富的用户界面(UI)元素而闻名,为开发者提供了创建动态、交互式的Web应用的强大工具。在“Ext2.2 实例和...

    EXT2.2自带例子,adv-vtypes.js文件中包含的daterange验证存在一个bug

    EXT2.2是一个古老的JavaScript框架,用于构建富客户端应用程序,特别是Web应用。在这个特定的例子中,我们关注的是`adv-vtypes.js`文件,它包含了EXT2.2中的自定义验证类型。`daterange`验证器是EXT2.2中一个用于...

    ext2.2 文档ext是目前最美观的ui,他开始只支持yui,现在有独特的功能,结合ajax的使用,让你感觉爽,请看看吧

    在EXT2.2版本中,开发者可以利用Ajax(异步JavaScript和XML)技术实现页面的无刷新更新,提供更加流畅和快速的用户体验。EXT的Ajax接口设计简洁,允许开发者轻松地与服务器进行数据交换,同时通过事件驱动的模型,...

    ext2.2+struts2使用json传输数据生成的树

    最后,不要忘记在HTML页面中正确引入`Ext2.2`的库文件,包括CSS样式表和JavaScript脚本,确保所有依赖项都已加载。 通过上述步骤,我们就成功地实现了使用`Ext2.2`和`Struts2`集成,通过`JSON`数据生成树形视图。...

    EXT 2.2 的HELLO WORD 创建详程

    总结,Ext JS 2.2的Hello World创建过程是学习Ext JS框架的第一步,通过实践这个过程可以初步了解Ext JS的基本结构和使用方法。通过对官方DEMO源码的研究和官方文档的阅读,开发者可以进一步提高自己开发富客户端Web...

    ext_2.2_皮肤_12种

    EXT是JavaScript库Ext JS的一个早期版本,主要用于构建富客户端Web应用程序。这个"ext_2.2_皮肤_12种"的压缩包包含了EXT 2.2版本的12个不同皮肤,允许开发者为他们的应用提供不同的视觉风格,以满足用户个性化需求或...

    Oozie_ext-2.2.zip

    《Oozie与ExtJS:理解Oozie_ext-2.2.zip的使用与功能》 在大数据处理领域,Oozie是一个不可或缺的组件,它是一个工作流调度系统,用于管理Hadoop作业。然而,有时候用户可能会遇到Oozie的Web用户界面(UI)无法正常...

    AJAX框架 EXT - 2.2 帮助文档 开发指南 核心API 3IN1

    EXT是JavaScript库,专为构建富互联网应用程序(RIA)而设计,它利用了Ajax技术,提供了丰富的用户界面组件和交互式应用的框架。EXT 2.2是该框架的一个版本,包含了对当时Web开发需求的广泛支持。在这个压缩包中,你...

    Ext-js 2.2

    Ext-js 2.2 是一个历史悠久的前端JavaScript框架,由Sencha公司开发,主要用于构建富互联网应用程序(RIA)。这个版本发布于2009年,是Ext-js发展过程中的一个重要里程碑,它为开发者提供了丰富的组件库、强大的数据...

    ext-2.2.zip (oozie打开web界面所需的js文件)

    标题 "ext-2.2.zip" 是一个包含用于Oozie Web界面的JavaScript库的压缩文件,特别是EXT JS框架的特定版本。EXT JS是一个强大的客户端JavaScript库,它提供了丰富的用户界面组件和数据可视化功能,常用于构建交互式...

    Ext2.2-用XML做数据源,可编辑Grid的例子.rar

    本示例“Ext2.2-用XML做数据源,可编辑Grid的例子.rar”聚焦于如何利用Ext JS的Grid组件,并结合XML数据源来实现一个可编辑的数据网格。 在Web应用中,数据展示和编辑是常见的需求。Grid组件是Ext JS处理表格数据的...

    ext-2.2.zip Oozie的web界面安装所需要的包

    压缩包子文件只有一个,即"ext-2.2",这通常是一个包含JavaScript、CSS和其他前端资源的目录,它们构成了Oozie web界面的前端部分。这个目录可能包含以下内容: 1. JavaScript文件:负责页面的交互逻辑,如表单验证...

Global site tag (gtag.js) - Google Analytics