ExtJs學習筆記(7)_獲取GridPanel選中行的詳細資訊
阿新 • • 發佈：2019-01-29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"
*{font-size:12px;line-height:130%;}</style><title>ExtJs_Grid_Xml</title></head><body>
Ext.onReady(function() {
var store =new Ext.data.Store({
url: 'GridData.xml',
reader: new Ext.data.XmlReader(
{ record: 'Item' },
["ASIN", "Author", "Manufacturer", "ProductGroup", "Title"])
});
return'<a href="Book.aspx?id='+ ID +'" target="_blank">'+ ID +'</span>';
}
var grid =new Ext.grid.GridPanel({
store: store,
frame: true,
columns: [
{ id: "ASIN", header: "出版號", width: 120, renderer: SeeDetail, dataIndex: 'ASIN', sortable: true },
{ header: "作者", width: 120, dataIndex: 'Author', sortable: true },
{ header: "書名", width: 180, dataIndex: 'Title', sortable: true },
{ header: "製作商", width: 115, dataIndex: 'Manufacturer', sortable: false },
{ header: "產品組", width: 100, dataIndex: 'ProductGroup', sortable: false}],
renderTo: 'example-grid',
viewConfig: { columnsText: '顯示列', sortAscText: '升序', sortDescText: '降序' },
width: 660,
height: 100,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
// 定義詳細資訊的顯示模板var bookTplMarkup = [
'出版號: <a href="http://www.baidu.com/{ASIN}" target="_blank">{ASIN}</a><br/>',
'作者: {Author}<br/>',
'書名: {Title}<br/>',
'產品組: {ProductGroup}<br/>'
];
var bookTpl =new Ext.Template(bookTplMarkup); //ExtJs的模板元件var p =new Ext.Panel({
id: "detailPanel",
title: '詳細情況', //標題 collapsible: true, //右上角上的那個收縮按鈕，設為false則不顯示 renderTo: 'example-grid', //這個panel顯示在html中id為container的層中 width: 660,
height: 100,
html: "請在上面網格中選擇一行資料"//panel主體中的內容，可以執行html程式碼 });
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
Ext.MessageBox.alert("提示","您選擇的出版號是："+ r.data.ASIN);
});
store.load();
});
</script><div id="example-grid" style="margin:10px 0 0 10px"></div></body></html>
*{font-size:12px;line-height:130%;}</style><title>ExtJs_Grid_Xml</title></head><body>
Ext.onReady(function() {
var store =new Ext.data.Store({
url: 'GridData.xml',
reader: new Ext.data.XmlReader(
{ record: 'Item' },
["ASIN", "Author", "Manufacturer", "ProductGroup", "Title"])
});
return'<a href="Book.aspx?id='+ ID +'" target="_blank">'+ ID +'</span>';
}
var grid =new Ext.grid.GridPanel({
store: store,
frame: true,
columns: [
{ id: "ASIN", header: "出版號", width: 120, renderer: SeeDetail, dataIndex: 'ASIN', sortable: true },
{ header: "作者", width: 120, dataIndex: 'Author', sortable: true },
{ header: "書名", width: 180, dataIndex: 'Title', sortable: true },
{ header: "製作商", width: 115, dataIndex: 'Manufacturer', sortable: false },
{ header: "產品組", width: 100, dataIndex: 'ProductGroup', sortable: false}],
renderTo: 'example-grid',
viewConfig: { columnsText: '顯示列', sortAscText: '升序', sortDescText: '降序' },
width: 660,
height: 100,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
// 定義詳細資訊的顯示模板var bookTplMarkup = [
'出版號: <a href="http://www.baidu.com/{ASIN}" target="_blank">{ASIN}</a><br/>',
'作者: {Author}<br/>',
'書名: {Title}<br/>',
'產品組: {ProductGroup}<br/>'
];
var bookTpl =new Ext.Template(bookTplMarkup); //ExtJs的模板元件var p =new Ext.Panel({
id: "detailPanel",
title: '詳細情況', //標題 collapsible: true, //右上角上的那個收縮按鈕，設為false則不顯示 renderTo: 'example-grid', //這個panel顯示在html中id為container的層中 width: 660,
height: 100,
html: "請在上面網格中選擇一行資料"//panel主體中的內容，可以執行html程式碼 });
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
Ext.MessageBox.alert("提示","您選擇的出版號是："+ r.data.ASIN);
});
store.load();
});
</script><div id="example-grid" style="margin:10px 0 0 10px"></div></body></html>