X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..b37ceabb82336ee82757cd32efe353cfab8ec267:/docs/output/Ext.grid.GridPanel.html?ds=inline diff --git a/docs/output/Ext.grid.GridPanel.html b/docs/output/Ext.grid.GridPanel.html index b13bbf42..6e636d73 100644 --- a/docs/output/Ext.grid.GridPanel.html +++ b/docs/output/Ext.grid.GridPanel.html @@ -1,386 +1,248 @@ -
-
- 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
Extends:Panel
-
- * -This class represents the primary interface of a component based grid control. -

Usage: -
var grid = new Ext.grid.GridPanel({
-    store: new Ext.data.Store({
-        reader: reader,
-        data: xg.dummyData
+
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
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
     }),
-    columns: [
-        {id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
-        {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
-        {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
-        {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
-        {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
-    ],
-    viewConfig: {
-        forceFit: true,
+    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');
+        getRowClass: function(record, index) {
+            var c = record.get('change');
             if (c < 0) {
                 return 'price-fall';
-            } else if (c > 0) {
+            } else if (c > 0) {
                 return 'price-rise';
             }
         }
     },
-    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
-    width:600,
-    height:300,
-    frame:true,
-    title:'Framed with Checkbox Selection and Horizontal Scrolling',
-    iconCls:'icon-grid'
+    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:
    
+
    Notes:
    
+
      
 
    • Although this class inherits many configuration options from base classes, some of them
-(such as autoScroll, 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. The dimensions can either
-be set through the height and width configuration options or automatically set by using the grid in a Container
-who's layout provides sizing of its child items.
      • 
+(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.
      • 
-
            
    
-        
-        
    
-                
-        
    Config Options
    
-        
-            
-                
-                
-            
-                
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
-        
-    
-        
-        
-        
    Config OptionsDefined By
     
-        
-            autoExpandColumn : String            
    
-                            The id of a column in this grid that should expand to fill unused space. This id can not be 0.                        
    
-            		GridPanel
     
-        
-            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
     
-        
-            baseCls : String            
    
-                            The base CSS class to apply to this panel's element (defaults to 'x-panel').                        
    
-            		Panel
     
-        
-            buttonAlign : String            
    
-                            The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').                        
    
-            		Panel
     
-        
-            buttons : Array            
    
-                            An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.                        
    
-            		Panel
     
-        
-            cm : Object            
    
-                            Shorthand for colModel.                        
    
-            		GridPanel
     
-        
-            colModel : Object            
    
-                            The Ext.grid.ColumnModel to use when rendering the grid (required).                        
    
-            		GridPanel
     
-        
-            collapsed : Boolean            
    
-                            True to render the panel collapsed, false to render it expanded (defaults to false).                        
    
-            		Panel
     
-        
-            collapsedCls : String            
    
-                            A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').                        
    
-            		Panel
     
-        
-            columns : Array            
    
-                            An array of columns to auto create a ColumnModel                        
    
-            		GridPanel
     
-        
-            deferRowRender : Boolean            
    
-                            True to enable deferred row rendering. Default is true.                        
    
-            		GridPanel
     
-        
-            disableSelection : Boolean            
    
-                            True to disable selections in the grid (defaults to false). - ignored if a SelectionModel is specified                        
    
-            		GridPanel
     
-        
-            disabled : Boolean            
    
-                            Render this component disabled (default is false).                        
    
-            		Component

\ No newline at end of file