ExtJS 的一些使用总结（适用于3.x版本）——第三弹

这些方法大多运行在ExtJS3.2到3.6版本，极个别方法也可以用于4.x版本，请使用前先测试。

• 上传文件   inputType : 'file'
  

  var form = new Ext.form.FormPanel({
  	fileUpload : true,
  	items : [{
  		xtype : 'textfield',
  		inputType : 'file',
  		id : 'file_id',
  		fieldLabel : '请选择Excel文件',
  		name : 'names',
  		validator : function(value){
  			var arr = value.split('.');
  			if(arr[arr.length - 1] != 'xls' && arr[arr.length - 1] != 'xlsx'){
  				return '请选择 xls 或 xlsx 格式的Excel文件';
  			}
  			else{return true;}
  		}
  	}]
  });

  表单验证
  

  form.getForm().isValid()

  表单重置
  

  form.getForm().reset();

  表单提交
  

  form.getForm().submit({
  	url : 'your url ... ',
  	method : 'POST',
  	waitMsg : '正在上传,请稍候...',
  	success : function(form, action){
  		Ext.Msg.alert('提示','上传成功!');
  	},
  	failure : function(){
  		Ext.Msg.alert('提示','上传失败!');
  	}
  });

有时候需要同时上传多个文件，extjs3.x版本不支持，可以到源码中添加一个属性。 ext-all-debug.js中找到下面代码：

if(this.inputType){
    cfg.type = this.inputType;
}

使其支持选择多文件进行上传，变为如下代码：

if(this.inputType){
    cfg.type = this.inputType;
}

if(this.inputType == 'file'){
    cfg.multiple = 'multiple';
}

这样就可以一次性选择多个文件了，但唯一缺点是不支持IE，因为IE不支持input的multiple属性。

extjs4以上版本就好办多了，因为在ext-all-debug.js中可以看到以下代码：

createFileInput : function(isTemporary) {
    var me = this;
    me.fileInputEl = me.el.createChild({
        name: me.inputName,
        id: !isTemporary ? me.id + '-fileInputEl' : undefined,
        cls: me.inputCls,
        tag: 'input',
        type: 'file',
        size: 1
    });
    me.fileInputEl.on('change', me.fireChange, me);  
}

其中size便是每次可以上传的文件数上限，修改即可。

• 表格编辑模式下修改一个单元格后会有一个红三角标记，客户如想要去掉，可以用以下代码：

  new Ext.grid.EditorGridPanel({
  		viewConfig : {
  			markDirty : false // 隐藏红三角
  		},
  		clicksToEdit : 1,//左键点击1次开启编辑模式
  		stripeRows : true,//表格是否隔行换色，默认false
  		loadMask : true,//是否在加载数据时显示遮罩效果，默认false
  		columnLines : true,//是否显示列分割线，默认false
  		store : store,
  		cm :cm,
  		buttonAlign : "left",
  		buttons: ['->',
  		{
  			text: '确定',
  			id : 'add_btn',
  			disabled : true,
  			handler : function (){
  				Ext.getCmp('add_btn').disable();// 禁用确定按钮，防止重复操作
  				...
  			}
  		},{
  			text : '取消',
  			handler : function (){
  				...
  			}
  		}]
  });

  
  
• 表格添加复选框

  sm : new Ext.grid.RowSelectionModel( {
  			singleSelect : true
  })

• 表格添加一行空数据store.insert(i,Plant);

• var grid = new Ext.grid.EditorGridPanel({
  	loadMask : true,
  	store : store,
  	anchor : '100% 100%',
  	plugins : check,
  	clicksToEdit : 1,
  	sm : new Ext.grid.RowSelectionModel( {
  		singleSelect : true
  	}),
  	colModel : colModel,
  	tbar:[{
  		text : '增加',
  		handler : function (){
  			var Plant = grid.getStore().recordType;
  			var p = new Plant({
  				zdmc:'',
  				type:'',
  				size: 0,
  				scale: 0,
  				flag : true,
  				id : ''
  			});
  			grid.stopEditing();
  			store.insert(0,p);
  			grid.startEditing(0,0);
  		}
  		
  	},'-',{
  		ref:'../removeBtn',
  		iconCls : 'icon-delete',
  		text : '删除',
  		disabled : true,
  		handler : function (){
  			grid.stopEditing();
  			var s = grid.getSelectionModel().getSelections();
  			for(var i=0, r;r=s[i];i++){
  				store.remove(r);
  			}
  		}
  	}]
  });

  
  
  
• 表格某一行数据编辑完后，获取修改后的数据

  var data = grid.getStore().getAt(i).data; // 获取第(i+1)行的数据
  var str = Ext.encode(data); // 将对象解析为字符串