如圖有多個連接,javascript
{ text: '探頭維度配置', dataIndex: 'probeId', cls: 'ux-grid-header', align: 'center', width: 125, renderer: function (val) { return '<a href="javascript:void(0);" type="probes" >詳情</a>'; } }, { text: '日誌', cls: 'ux-grid-header', align: 'center', width: 240, renderer: function (val) { return '<a href="javascript:void(0);" type="errorLogs" >error.log,</a><a href="javascript:void(0);" type="warnLogs" >warn.log,</a><a href="javascript:void(0);" type="infoLogs" >info.log</a>'; }
以上面代碼爲例,在renderer的時候能夠在連接中自定義一個屬性「type」,這樣就能夠經過grid單元格的點擊事件監聽,而後經過type判斷點擊的是哪個連接,代碼以下:html
listeners: { //這是單擊grid單元格時,觸發的事件 'cellclick': function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) { //定義一個函數,等下請求日誌是同一個服務器的路徑,只是類型不一樣。 function fn(data, logsType) { if (1 != status) { Ext.MessageBox.alert('提示', "該引擎未啓動"); return; } var params = {}; params['id'] = data.id; params['logsType'] = logsType; // 發起請求時出現遮罩層 var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "請等待..." }); myMask.show(); Ext.Ajax.request({ url: 'engine/logs', headers: { 'Content-Type': 'application/json;charset=utf-8' }, params: params, method: 'GET', success: function (response, options) { var result = Ext.JSON.decode(response.responseText); if (!result.success) { Ext.MessageBox.alert('出錯提示', result.error); } else { // var jsonData=JSON.parse(JSON.stringify(result.data)); Ext.create('Ext.Window', { title: '日誌', height: 400, width: 700, layout: 'fit', items: { xtype: 'panel', autoScroll: true, // value: result.data, html: result.data, readOnly: true } }).show(); } myMask.hide(); }, failure: function (response, options) { if (!response.success) { Ext.MessageBox.alert('出錯提示', response.error); } else { Ext.MessageBox.alert('運行錯誤', response.responseText); } myMask.hide(); } }); } var me = this; var data = record.data; var status = data.status; if (e.target.nodeName == 'A') { var type = e.target.type; switch (type) { case 'rule': if (1 != status) { Ext.MessageBox.alert('提示', "該引擎未啓動"); return; } Ext.Ajax.request({ url: 'engine/engineRules', headers: { 'Content-Type': 'application/json;charset=utf-8' }, jsonData: data, method: 'POST', success: function (response, options) { var result = Ext.JSON.decode(response.responseText); if (!result.success) { Ext.MessageBox.alert('出錯提示', result.error); } else { // var jsonData=JSON.parse(JSON.stringify(result.data)); Ext.create('Ext.Window', { title: '引擎訂閱規則', height: 400, width: 700, layout: 'fit', items: { xtype: 'textarea', value: result.data, readOnly: true } }).show(); } }, failure: function (response, options) { if (!response.success) { Ext.MessageBox.alert('出錯提示', response.error); } else { Ext.MessageBox.alert('運行錯誤', response.responseText); } } }); break; case 'probes' : var ids = data.probeId; var probesWin = Ext.widget('probesWindow'); var probeStore = probesWin.down('grid').getStore(); probeStore.getProxy().extraParams = {'ids': ids}; probeStore.loadPage(1); probesWin.show(); break; case 'errorLogs': fn(data, 'errorLogs'); break; case 'infoLogs': fn(data, 'infoLogs'); break; case 'warnLogs': fn(data, 'warnLogs'); break; default: return; } } } }
這樣就根據判斷點擊的是哪個超連接了,下面是整個頁面的源碼:java
if (1 != status) { Ext.MessageBox.alert('提示', "該引擎未啓動"); return; } var params = {}; params['id'] = data.id; params['logsType'] = logsType; // 發起請求時出現遮罩層 var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "請等待..." }); myMask.show(); Ext.Ajax.request({ url: 'engine/logs', headers: { 'Content-Type': 'application/json;charset=utf-8' }, params: params, method: 'GET', success: function (response, options) { var result = Ext.JSON.decode(response.responseText); if (!result.success) { Ext.MessageBox.alert('出錯提示', result.error); } else { // var jsonData=JSON.parse(JSON.stringify(result.data)); Ext.create('Ext.Window', { title: '日誌', height: 400, width: 700, layout: 'fit', items: { xtype: 'panel', autoScroll: true, // value: result.data, html: result.data, readOnly: true } }).show(); } myMask.hide(); }, failure: function (response, options) { if (!response.success) { Ext.MessageBox.alert('出錯提示', response.error); } else { Ext.MessageBox.alert('運行錯誤', response.responseText); } myMask.hide(); } });