X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..b37ceabb82336ee82757cd32efe353cfab8ec267:/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 4d57a352..6e636d73 100644 --- a/docs/output/Ext.grid.GridPanel.html +++ b/docs/output/Ext.grid.GridPanel.html @@ -1,73 +1,73 @@ -
Observable
  Component
    BoxComponent
      Container
        Panel
          GridPanel

Class Ext.grid.GridPanel

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

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.
  • +
    Observable
  Component
    BoxComponent
      Container
        Panel
          GridPanel

    Class Ext.grid.GridPanel

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

    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
     autoExpandMax : Number
    The maximum width the autoExpandColumn -can have (if enabled). Defaults to 1000.
    GridPanel
     autoExpandMin : Number
    The minimum width the autoExpandColumn +animation (defaults to true if the Ext.Fx class is available, otherwise false).
    Panel
     autoExpandMax : Number
    The maximum width the autoExpandColumn +can have (if enabled). Defaults to 1000.
    GridPanel
     autoExpandMin : Number
    The minimum width the autoExpandColumn can have (if enabled). Defaults to 50.
    GridPanel
     collapsedCls : String
    A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
    Panel
     columnLines : Boolean
    true to add css for column separation lines. -Default is false.
    GridPanel
     columnLines : Boolean
    true to add css for column separation lines. +Default is false.
    GridPanel
     data : Mixed
    The initial set of data to apply to the tpl to -update the content area of the Component.
    Component
     ddGroup : String
    The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
    GridPanel
     disableSelection : Boolean

    true to disable selections in the grid. Defaults to false.

    +update the content area of the Component.
    Component
     ddGroup : String
    The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
    GridPanel
     disableSelection : Boolean

    true to disable selections in the grid. Defaults to false.

    Ignored if a SelectionModel is specified.

    GridPanel
     enableColumnHide : Boolean
    Defaults to true to enable hiding of columns -with the header menu.
    GridPanel
     enableColumnMove : Boolean
    Defaults to true to enable drag and drop reorder of columns. false -to turn off column reordering via drag drop.
    GridPanel
     enableColumnResize : Boolean
    false to turn off column resizing for the whole grid. Defaults to true.
    GridPanel
     enableColumnHide : Boolean
    Defaults to true to enable hiding of columns +with the header menu.
    GridPanel
     enableColumnMove : Boolean
    Defaults to true to enable drag and drop reorder of columns. false +to turn off column reordering via drag drop.
    GridPanel
     enableColumnResize : Boolean
    false to turn off column resizing for the whole grid. Defaults to true.
    GridPanel
     enableHdMenu : Boolean
    Defaults to true to enable the drop down button for menu in the headers.
    GridPanel
     loadMask : Object
    An Ext.LoadMask config or true to mask the grid while +});

    Observable
     loadMask : Object
    An Ext.LoadMask config or true to mask the grid while loading. Defaults to false.
    GridPanel
     resizeEvent : String
    The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
    Panel
     resizeEvent : String
    The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
    Panel
     sm : Object
    Shorthand for selModel.
    GridPanel
     sm : Object
    Shorthand for selModel.
    GridPanel
     store : Ext.data.Store
    The Ext.data.Store the grid should use as its data source (required).
    GridPanel
     store : Ext.data.Store
    The Ext.data.Store the grid should use as its data source (required).
    GridPanel
     trackMouseOver : Boolean
    True to highlight rows when the mouse is over. Default is true +(see Ext.XTemplate.overwrite).
    Component
     trackMouseOver : Boolean
    True to highlight rows when the mouse is over. Default is true for GridPanel, but false for EditorGridPanel.
    GridPanel
     view : Object
    The Ext.grid.GridView used by the grid. This can be set -before a call to render().
    GridPanel
     view : Object
    The Ext.grid.GridView used by the grid. This can be set +before a call to render().
    GridPanel
     x : Number
    The local x (left) coordinate for this component if contained within a positioning container.
    BoxComponent
     hidden : Boolean
    True if this component is hidden. Read-only.
    Component
     initialConfig : Object
    This Component's initial configuration specification. Read-only.
    Component
     rendered : Boolean
    True if this component has been rendered. Read-only.
    Component

    Public Methods

    MethodDefined By