1. 程式人生 > >Ext 再grid的renderer中使用ajax訪問服務器

Ext 再grid的renderer中使用ajax訪問服務器

負載 頁面 bsp degree 設置 val 渲染 class NPU

ps:在renderer中使用ajax訪問服務器,並不是一個很好的方法因為會徒增大量的頁面負載,個人建議是將數據在後臺處理好後,封裝到store中。

以下是在renderer中利用ajax渲染表格內容的代碼:

 //定義列模式
 var colunms=[
        { header: ‘項目名稱‘,		align: ‘left‘,		dataIndex : ‘xm_name‘,	flex: 1,	sortable: false},
        { header: ‘項目類型‘,		align: ‘left‘,		dataIndex : ‘itemType‘,	flex: 1,	sortable: false,renderer:function(value){
        	return getDicNameByDicId(value);
        }},
        { header: ‘項目類別‘,		align: ‘left‘,		dataIndex : ‘itemCategory‘,	flex: 1,	sortable: false,renderer:function(value){
        	return getDicNameByDicId(value);
        }},
        { header: ‘重要程度‘,		align: ‘left‘,		dataIndex : ‘importantDegree‘,     flex: 1,	sortable: false,renderer:function(value){
        	return getDicNameByDicId(value);
        }},
        { header: ‘申報年度‘,		align: ‘left‘,		dataIndex : ‘inputYear‘,     flex: 1,	sortable: false},
        { header: ‘實施年度‘,		align: ‘left‘,		dataIndex : ‘forYear‘,     flex: 1,	sortable: false},
        { header: ‘項目年度‘,		align: ‘left‘,		dataIndex : ‘theyear‘,     flex: 1,	sortable: false}
        
        ];

渲染的方法。這裏的需求是根據單元格的id值從數據庫獲取對應的name。

    function getDicNameByDicId(datas){
        var name ="";
        Ext.Ajax.request({
            url: contextPath + "/FtProjectAction!getDicNameByDicId.action",
            params: {datas:datas},
            async:false,
            success: function (response, opts) {
                
var jsonData= Ext.JSON.decode(response.responseText); name=jsonData.msg; }, failure: function (response, opts) { } }); return name; }
  async:false是必須設置的 不然瀏覽器在返回值之前已經渲染了頁面。導致單元格內容不顯示。
async 設置為 false,則所有的請求均為同步請求,在沒有返回值之前,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行。

Ext 再grid的renderer中使用ajax訪問服務器