X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.grid.GridPanel.html?ds=sidebyside diff --git a/docs/output/Ext.grid.GridPanel.html b/docs/output/Ext.grid.GridPanel.html index 8dc7af81..403aa45b 100644 --- a/docs/output/Ext.grid.GridPanel.html +++ b/docs/output/Ext.grid.GridPanel.html @@ -1,117 +1,117 @@ -
Properties Methods Events Config Options Direct Link 
Observable
  Component
    BoxComponent
      Container
        Panel
          GridPanel

Class Ext.grid.GridPanel

Package:Ext.grid
Defined In:GridPanel.js
Class:GridPanel
Subclasses:EditorGridPanel, TableGrid
Extends:Panel
xtype:grid

This class represents the primary interface of a component based grid control to represent data -in a tabular format of rows and columns. The GridPanel is composed of the following:

-
-

Example usage:

-
var grid = new Ext.grid.GridPanel({
-    store: new Ext.data.Store({
-        autoDestroy: true,
-        reader: reader,
-        data: xg.dummyData
-    }),
-    colModel: new Ext.grid.ColumnModel({
-        defaults: {
-            width: 120,
-            sortable: true
-        },
-        columns: [
-            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
-            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
-            {header: 'Change', dataIndex: 'change'},
-            {header: '% Change', dataIndex: 'pctChange'},
-            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype

-            {
-                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
-                xtype: 'datecolumn', format: 'M d, Y'
-            }
-        ],
-    }),
-    viewConfig: {
-        forceFit: true,
-
-//      Return CSS class to apply to rows depending upon data values

-        getRowClass: function(record, index) {
-            var c = record.get('change');
-            if (c < 0) {
-                return 'price-fall';
-            } else if (c > 0) {
-                return 'price-rise';
-            }
-        }
-    },
-    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
-    width: 600,
-    height: 300,
-    frame: true,
-    title: 'Framed with Row Selection and Horizontal Scrolling',
-    iconCls: 'icon-grid'
-});
-

Notes:

-
    -
  • Although this class inherits many configuration options from base classes, some of them -(such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will -have no effect.
    • -
  • A grid requires a width in which to scroll its columns, and a height in which to -scroll its rows. These dimensions can either be set explicitly through the -height and width -configuration options or implicitly set by using the grid as a child item of a -Container which will have a layout manager -provide the sizing of its child items (for example the Container of the Grid may specify -layout:'fit').
    • -
  • To access the data in a Grid, it is necessary to use the data model encapsulated -by the Store. See the cellclick event for more details.
    • -

Config Options

Config OptionsDefined By
\ No newline at end of file