X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6e39d509471fe9b4e2660e0d1631b350d0c66f40:/docs/output/Ext.grid.GridPanel.html diff --git a/docs/output/Ext.grid.GridPanel.html b/docs/output/Ext.grid.GridPanel.html index dc5e364f..20ce5637 100644 --- a/docs/output/Ext.grid.GridPanel.html +++ b/docs/output/Ext.grid.GridPanel.html @@ -1,4 +1,4 @@ -
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
xtype:grid

This class represents the primary interface of a component based grid control to represent data +

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:

  • Store : The Model holding the data records (rows) @@ -12,19 +12,28 @@ in a tabular format of rows and columns. The GridPanel is composed of the follow

Example usage:

var grid = new Ext.grid.GridPanel({
-    store: new (@link Ext.data.Store}({
+    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'},
-        // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype

-        {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}
-    ],
+    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,
 
@@ -59,18 +68,18 @@ provide the sizing of its child items (for example the Container of the Grid may
 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