Add rowselect event handler to a GridPanel : GridPanel « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. GridPanel

Add rowselect event handler to a GridPanel

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
  
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'ext-3.0.0/examples/grid/sheldon.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title',
         'Manufacturer',
         'ProductGroup',
         // Detail URL is not part of the column model of the grid
         'DetailPageURL'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    viewConfig: {
      forceFit: true
    },
        height:210,
    split: true,
    region: 'north'
    });
  
  // define a template to use for the detail view
  var bookTplMarkup = [
    'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
    'Author: {Author}<br/>',
    'Manufacturer: {Manufacturer}<br/>',
    'Product Group: {ProductGroup}<br/>'
  ];
  var bookTpl = new Ext.Template(bookTplMarkup);

  var ct = new Ext.Panel({
    renderTo: 'binding-example',
    frame: true,
    title: 'Book List',
    width: 540,
    height: 400,
    layout: 'border',
    items: [
      grid,
      {
        id: 'detailPanel',
        region: 'center',
        bodyStyle: {
          background: '#ffffff',
          padding: '7px'
        },
        html: 'Please select a book to see additional details.'
      }
    ]
  })
  grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
    var detailPanel = Ext.getCmp('detailPanel');
    bookTpl.overwrite(detailPanel.body, r.data);
  });
    store.load();
});
</script> 

<div id="binding-example"></div>
</body>
</html>








Related examples in the same category

1.Sort table by name
2.Add row to a table
3.Remove a row from a table
4.Remove all data from GridPanel
5.Layout GridPanel(table) and FormPanel in border layout
6.Using a Grid with a Form
7.Table Selection
8.The Grid demonstrates the use of creation of derived fields in a Record created using a custom convert function, and the use of column renderers.
9.Set column name, width, height, title for Ext.grid.GridPanel
10.Set column to sortable
11.GridPanel: framing
12.GridPanel: buttons
13.GridPanel: toolbars
14.Add buttons to GridPanel
15.Static data grid
16.Reload data to GridPanel
17.Grid Plugins
18.stripeRows: true,
19.Grouping GridPanel
20.Buffer Grid Example
21.GridPanel Framed with Checkbox Selection and Horizontal Scrolling
22.Grid with Numbered Rows and Force Fit
23.Set autoExpandColumn for GridPanel
24.autoExpandColumn: 'column name',
25.Set up data, column for Ext.grid.GridPanel
26.Set RowSelectionModel for Ext.grid.GridPanel
27.Data Binding Example - Implemented with classes
28.Mark changed field
29.Updating the grid data via a button click
30.Define RowSelectionModel and set single selection
31.Define column model and set header, dataIndex and sortable
32.Create a grid with from an existing, unformatted HTML table.