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); // 将对象解析为字符串