Layout GridPanel(table) and FormPanel in border layout : GridPanel « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. GridPanel

Layout GridPanel(table) and FormPanel in border layout

  

<!--
/*!
 * 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            : 325,
    region           : 'west',
        title            : 'Data Grid',
    selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });



  // Declare the text fields.  This could have been done inline, is easier to read
  // for folks learning :)
  var textField1 = new Ext.form.TextField({
    fieldLabel : 'Record Name',
    name       : 'name'
  });


  var textField2 = new Ext.form.TextField({
    fieldLabel : 'Column 1',
    name       : 'column1'
  });


  var textField3 = new Ext.form.TextField({
    fieldLabel : 'Column 2',
    name       : 'column2'
  });


  // Setup the form panel
  var formPanel = new Ext.form.FormPanel({
    region     : 'center',
    title      : 'Generic Form Panel',
    bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
    labelWidth : 100,
    width      : 325,
    items      : [
      textField1,
      textField2,
      textField3
    ]
  });



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


  // used to add records to the destination stores
  var blankRecord =  Ext.data.Record.create(fields);

  /****
  * Setup Drop Targets
  ***/

  // This will make sure we only drop to the view container
  var formPanelDropTargetEl =  formPanel.body.dom;

  var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
    ddGroup     : 'gridDDGroup',
    notifyEnter : function(ddSource, e, data) {

      //Add some flare to invite drop.
      formPanel.body.stopFx();
      formPanel.body.highlight();
    },
    notifyDrop  : function(ddSource, e, data){

      // Reference the record (single selection) for readability
      var selectedRecord = ddSource.dragData.selections[0];


      // Load the record into the form
      formPanel.getForm().loadRecord(selectedRecord);


      // Delete record from the grid.  not really required.
      ddSource.grid.store.remove(selectedRecord);

      return(true);
    }
  });



});
</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.Using a Grid with a Form
6.Table Selection
7.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.
8.Set column name, width, height, title for Ext.grid.GridPanel
9.Set column to sortable
10.Add rowselect event handler to a GridPanel
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.