最近一直在使用Sencha进行前端开发，单独开一个帖子，用于常见问题的整理。会陆陆续续往里面添加一些内容，同时也希望能够帮助到大家。

ExtJS submit 提交导致 emptyText 提交进入表单：

win.form.submit({
     submitEmptyText: false,
     url : 'xxxxx',
     method : 'post'
});

ExtJS 限制text最大字符数。

{
	fieldLabel: '教育证号',
	name:"teacher.educationCardNo",
	emptyText:'请输入教育证号',
	enforceMaxLength:true,   //关键是这个
	maxLength:18,
	value:""
}

ExtJS Ajax 提交SESSION失效的问题。

1. 首先通过后端返回 session timeout 的 header 信息，再通过 response.getResponseHeader 来判断是否存在这样的信息来确定session是否失效，代码如下：

Ext.onReady(function(){
	//请求超时的处理开始
	Ext.Ajax.on('requestcomplete', checkUserSessionStatus, this);
	function checkUserSessionStatus(conn, response, options) {
	    var sessionStatus = response.getResponseHeader("sessionstatus");
	    if (typeof(sessionStatus) != "undefined") {
	        Ext.Msg.alert('提示', '会话超时，请重新登录!',
	        function(btn, text) {
	            if (btn == 'ok') {
	                var redirect = root_path;
	                window.location = redirect;
	            }
	        });
	    }
	};
......

Ajax 的提交失败问题。

Ext.Ajax.request 提交与 Ext.Form.panel 中的 submit 都是属于 Ajax 提交，但是前者判断返回不是由服务器端的 { success ：false …} 来决定，而是通过返回的 responseText 中的返回值来判断， from 中的提交，可通过?failure 函数来判定。代码如下：

Ajax 返回失败：

Ext.Ajax.request({
    url: url,
    timeout: 6000,
    success: function(response) {
        var result = Ext.decode(response.responseText);
        if (result.success) {
            Ext.Msg.alert("提示", "数据删除成功");
        } else {
            Ext.Msg.alert("提示", result.message);
        }
        parentStore.reload();
    },
    error: function(response) {
        Ext.Msg.alert("提示", "对不起，操作失败。");
        parentStore.reload();
    }
});

form 表单提交失败：

Ext.getCmp("wx_student_add").submit({
    submitEmptyText: false,
    clientValidation: true,
    url: this.url,
    method: 'post',
    success: function(form, action) {
        top.Ext.Msg.alert("提示", "保存成功");
        Ext.getCmp("tw_addstudent").destroy();
        student_store.reload();
    },
    failure: function(form, action) {
        Ext.Msg.alert("提示", "数据提交失败");
        throw new Error("用户数据保存失败，请检查服务器端返回");
    }
});

表格中最后的操作事件传递当前选中行的技巧，以及判断点中了那个操作的DOM元素。

//====================Grid View 定义
{
    text: '操作',
    width: 220,
    // 在这里给需要操作的元素定义 className ...
    renderer: function(value, metaData, record) {
        var result = "<span class='opa-span span-info'>详细</span><span class='opa-span span-process'>查看流程</span>" +
            "<span class='opa-span span-file'>附件</span>" +
            "<a target='_blank' href='./print.html?studentId="+record.data.schoolStudentId+"' class='opa-span span-print'>打印</a>";
        return result;
    }
}],
bbar: {
    xtype: 'pagingtoolbar',
    displayMsg: '显示{0}-{1}条，共{2}条',
    emptyMsg: '<b class="font-error">当前无显示数据</b>',
    displayInfo: true
},
listeners: {
    // 定义点击事件
    cellclick: 'operatorAbnormalSchool'
}

//====================Grid Controller 操作定义====================
operatorAbnormalSchool: function (thisGrid,td,cellIndex, record, tr, rowIndex, e,eOpts) {
    var className = e.getTarget().className;
    // 通过不同的class类型来做不同的操作分配
    if (className.indexOf('span-info') > -1) {
        // 详细
        this.showAbnormalInfo(record.data);
    }
    if (className.indexOf('span-process') > -1) {
        // 查看流程
        this.showAbnormalProcess(record.data);
    }
    if (className.indexOf('span-file') > -1) {
        // 附件
        this.showAbnormalFile(record.data);
    }
    ...
},

 

待续……