ext中如何获取Grid当前选中行的信息

如何获取Grid当前选中行的信息

 

1.xml数据源内容:

     

    203

    21

    

      0446355453     

      Jimmy.Yang

      Warner Books

      Book

            

    

    

      0446613657          

      Sidney Sheldon

      Warner Books

      Book

            

      

  

2.静态页内容:

 

    

    

     

     

    

        *{font-size:12px;line-height:130%;}

    

    

    Ext.onReady(function() {

        var store = new Ext.data.Store({

            url: 'GridData.xml',

            reader: new Ext.data.XmlReader(

                { record: 'Item' },

                ["ASIN", "Author", "Manufacturer", "ProductGroup", "Title"])

        });

        function SeeDetail(ID) {

            return '' + ID + '';

        }

        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 = [

        '出版号: {ASIN}
',

        '作者: {Author}
',

        '书名: {Title}
',

        '产品组: {ProductGroup}
'

        ];

        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();

    });

效果图