Set RowSelectionModel for Ext.grid.GridPanel : GridPanel « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. GridPanel

Set RowSelectionModel for Ext.grid.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 from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myData = {
    records : [
      { name : "Record 0", column1 : "0", column2 : "0" },
      { name : "Record 1", column1 : "1", column2 : "1" },
      { name : "Record 2", column1 : "2", column2 : "2" },
      { name : "Record 3", column1 : "3", column2 : "3" },
      { name : "Record 4", column1 : "4", column2 : "4" },
      { name : "Record 5", column1 : "5", column2 : "5" },
      { name : "Record 6", column1 : "6", column2 : "6" },
      { name : "Record 7", column1 : "7", column2 : "7" },
      { name : "Record 8", column1 : "8", column2 : "8" },
      { name : "Record 9", column1 : "9", column2 : "9" }
    ]
  };


  // Generic fields array to use in both store defs.
  var fields = [
     {name: 'name', mapping : 'name'},
     {name: 'column1', mapping : 'column1'},
     {name: 'column2', mapping : 'column2'}
  ];

    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields : fields,
    data   : myData,
    root   : 'records'
    });


  // Column Model shortcut array
  var cols = [
    { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
    {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
    {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  ];

  // declare the source Grid
    var grid = new Ext.grid.GridPanel({
    ddGroup          : 'gridDDGroup',
        store            : gridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 650,
        height           : 325,
    region           : 'west',
        title            : 'Data Grid',
    selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });

  //Simple 'border layout' panel to house both grids
  var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout: 'fit',
    renderTo : 'panel',
    items    : [
      grid
    ],
    bbar    : [
      '->', // Fill
      {
        text    : 'Reset Example',
        handler : function() {
          //refresh source grid
          gridStore.loadData(myData);
        }
      }
    ]
  });

});
</script> 

<div id="panel"></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.Add rowselect event handler to a GridPanel
12.GridPanel: framing
13.GridPanel: buttons
14.GridPanel: toolbars
15.Add buttons to GridPanel
16.Static data grid
17.Reload data to GridPanel
18.Grid Plugins
19.stripeRows: true,
20.Grouping GridPanel
21.Buffer Grid Example
22.GridPanel Framed with Checkbox Selection and Horizontal Scrolling
23.Grid with Numbered Rows and Force Fit
24.Set autoExpandColumn for GridPanel
25.autoExpandColumn: 'column name',
26.Set up data, column 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.