Extjs4 圖片上傳 預覽

Ext.require([
    'Ext.form.*'
]);
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
var currentpath ='';
Ext.define('IMS.view.db.casesuspectCreate', {
    extend: 'Ext.window.Window',
    alias : 'widget.casesuspectCreate',
    height : 400,
    minHeight: 400,
    width : 660,
    minWidth: 660,
    resizable:false,
    modal : true,
    constrain:true,
    //constrainTo:Ext.get("#tabs"),
    layout: 'fit',
    autoShow: false,
    bAddForm: false,
    initComponent: function() {
        this.items = [
        {
            xtype: 'form',
            layout:'absolute',
            id:'formPanel',
            fileUpload : true,
            enctype: 'multipart/form-data',  
            waitMsgTarget: true,
            url:'ims/casesuspect/edtByParam',
            method:'post',
            items: [
                {
                    xtype: 'numberfield',
                    labelAlign:'right',
                    //maxValue: 100,
                    //minValue: 0,
                    allowNegative : false,
                    value: 1,
                    allowBlank:false,
                    selectOnFocus : true,
                    //padding:'10 0 0 0',
                    fieldLabel: '',
                    name : 'id',
					x:0,
					y:10,
					width:300,
                    hidden: true
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     emptyText:'請輸入姓名',
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     allowBlank:false,
                     padding:'8 0 0 0',
                     fieldLabel: '姓名',
                     name : 'szname',
                     //anchor: '-5',
					 labelWidth :60,
					 x:0,
					 y:2,
					 width:300,
                     hidden: false
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '曾用名',
                     name : 'szformername',
					 labelWidth :60,
                     x:0,
					 y:38,
					 width:300,
                     hidden: false
                },
                {
                     xtype: 'datefield',
                     labelAlign:'right',
					 format : 'Y-m-d',
                     value: new Date(),
                     //padding:'2 0 0 0',
                     fieldLabel: '出生日期',
                     name : 'nbirthday',
                     labelWidth :60,
                     x:0,
					 y:66,
					 width:300,
                     hidden: false
                 },
				 {
					xtype: 'combobox',
                    fieldLabel: '性別',
 					labelAlign:'right',
 					forceSelection: true,
 					typeAhead: true,
 					displayField: 'name',
 					valueField:'name',
 					editable:false,
 					mode:'local',
 					//id:'cmbgrpriglist',
 					name: 'szgender',
 					value:'男',
 					//emptyText: '請輸入證件類型',
 					allowBlank:false,
					loadMask : false,
 					store: Ext.create('Ext.data.SimpleStore', {
						fields: ['type', 'name'],
						data:[[' 0','男'],['1','女']]
					}),
					labelWidth :60,
                     x:0,
					 y:95,
					 width:300
				},
				{
                    xtype: 'combobox',
                    fieldLabel: '證件名稱',
 					labelAlign:'right',
 					forceSelection: true,
 					typeAhead: true,
 					displayField: 'name',
 					valueField:'name',
 					editable:true,
 					mode:'local',
 					//id:'cmbgrpriglist',
 					name: 'szpapersname',
 					//value:'身份證',
 					//emptyText: '請輸入證件類型',
 					//allowBlank:false,
 					store: Ext.create('Ext.data.SimpleStore', {
						fields: ['type', 'name'],
						data:[[' 0','身份證'],['1','工作證'],['2','駕駛證']]
					}),
					labelWidth :60,
                     x:0,
					 y:125,
					 width:300
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '證件號',
                     name : 'szpapersno',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:155,
					 width:300
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '民族',
                     name : 'sznation',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:185,
					 width:300
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '文化程度',
                     name : 'szeducation',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:215,
					 width:300
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '籍貫',
                     name : 'sznativeplace',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:245,
					 width:300
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '戶籍地',
                     name : 'szplacedomicile',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:275,
					 width:300
                 },
              
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '政治面貌',
                     name : 'szpoliticsstatus',
                     hidden: false,
					 labelWidth :60,
                     x:0,
					 y:305,
					 width:300
                 },
//**************************************************************************************************
//創建box
                 {    
                     xtype : 'box',       
                     id : 'logoPic',    
                     width : 310,    
                     height : 120,  
                     x:320,
                     y:30,
                     autoEl : {  
                    	 id:'show',
                         tag : 'img',    
                         src : Ext.BLANK_IMAGE_URL,    
                         //src : '1.png',   
                         style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
                         
                        
                       
                     }    
                  },
//**************************************************************************************************
//創建上傳按鈕
                 
				{
                     xtype: 'textfield',
                     labelAlign:'right',
                     id:'logoFile',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
					 inputType : 'file',
                     //selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     buttonText:'瀏覽...',
                     fieldLabel: '照片',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:10,
//***************************************************************************************************
//添加監聽
					 width:310,
					 listeners : {  
						    'render':function(){  
						    	 var logoFileCmp = Ext.getCmp('logoFile'); 
						       // alert(logoFileCmp);
						        logoFileCmp.on('change',function(field,newValue,oldValue){ 
						        	//alert("enter in method change");
						        		
						                 var picPath = logoFileCmp.getValue();  
//						                alert(picPath);
						                 
						                 
						                 var url =  Ext.getCmp('logoFile').value;  
						          
						                 
						                 
						                	 
						                  //項目關係,只處理IE
						                	 Ext.get('logoPic').dom.src=url;
						                
						            },this);  
						         }  
						}  
					
                },
                
                
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '聯繫電話',
                     name : 'szphone',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:155,
					 width:310
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '現居住地址',
                     name : 'szliveaddress',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:185,
					 width:310
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '單位/職業',
                     name : 'szjog',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:215,
					 width:310
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '常聯繫人',
                     name : 'szlinkman',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:245,
					 width:310
                 },
                {
                     xtype: 'textfield',
                     labelAlign:'right',
                     //emptyText:,
                     //invalidText:'',
                     //vtype: 'alphanum',
                     selectOnFocus : true,
                     //allowBlank:false,
                     //padding:'2 0 0 0',
                     fieldLabel: '聯繫人關係',
                     name : 'szlinkrelation',
                     hidden: false,
					 labelWidth :70,
                     x:320,
					 y:275,
					 width:310
                 }
			]
			
        }];
        
        this.buttons = [
        {
            text: '提交',
            action: 'save'
        },
        {
            text: '取消',
            scope: this,
            handler: function(button)
            {
                button.up('window').close();
            }
        }];
        
        this.callParent(arguments);
    }
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章