X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..10a866c12701c0a0afd0ac85dcdcf32a421514ac:/docs/output/Ext.grid.ColumnModel.html diff --git a/docs/output/Ext.grid.ColumnModel.html b/docs/output/Ext.grid.ColumnModel.html index a6f22f32..9e011b7f 100644 --- a/docs/output/Ext.grid.ColumnModel.html +++ b/docs/output/Ext.grid.ColumnModel.html @@ -1,1094 +1,362 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
Observable
-  ColumnModel
-

Class Ext.grid.ColumnModel

- - - - - - -
Package:Ext.grid
Defined In:ColumnModel.js
Class:ColumnModel
Subclasses:PropertyColumnModel
Extends:Observable
-
- * -This is the default implementation of a ColumnModel used by the Grid. This class is initialized -with an Array of column config objects. -

-An individual column's config object defines the header string, the Ext.data.Record -field the column draws its data from, an optional rendering function to provide customized -data formatting, and the ability to apply a CSS class to all cells in a column through its -id config option.
-
Usage:
-
var colModel = new Ext.grid.ColumnModel([
+
Observable
  ColumnModel
Class Ext.grid.ColumnModel
Package:Ext.grid
Defined In:ColumnModel.js
Class:ColumnModel
Subclasses:PropertyColumnModel
Extends:Observable
After the data has been read into the client side cache (Store),
+the ColumnModel is used to configure how and what parts of that data will be displayed in the
+vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation
+of a ColumnModel used by implentations of GridPanel.

+
Data is mapped into the store's records and then indexed into the ColumnModel using the
+dataIndex:

+
{data source} == mapping ==> {data store} == dataIndex ==> {ColumnModel}

+
Each Column in the grid's ColumnModel is configured with a
+dataIndex to specify how the data within
+each record in the store is indexed into the ColumnModel.

+
There are two ways to initialize the ColumnModel class:

+
Initialization Method 1: an Array

+
var colModel = new Ext.grid.ColumnModel([
     { header: "Ticker", width: 60, sortable: true},
-    { header: "Company Name", width: 150, sortable: true},
+    { header: "Company Name", width: 150, sortable: true, id: 'company'},
     { header: "Market Cap.", width: 100, sortable: true},
     { header: "$ Sales", width: 100, sortable: true, renderer: money},
     { header: "Employees", width: 100, sortable: true, resizable: false}
  ]);

-

-The config options defined by this class are options which may appear in each
-individual column definition. In order to use configuration options from the superclass,
-specify the column configuration Array in the columns config property. eg:
var colModel = new Ext.grid.ColumnModel({
+
The ColumnModel may be initialized with an Array of Ext.grid.Column column configuration
+objects to define the initial layout / display of the columns in the Grid. The order of each
+Ext.grid.Column column configuration object within the specified Array defines the initial
+order of the column display.  A Column's display may be initially hidden using the
+hidden config property (and then shown using the column
+header menu).  Fields that are not included in the ColumnModel will not be displayable at all.

+
How each column in the grid correlates (maps) to the Ext.data.Record field in the
+Store the column draws its data from is configured through the
+dataIndex.  If the
+dataIndex is not explicitly defined (as shown in the
+example above) it will use the column configuration's index in the Array as the index.

+
See Ext.grid.Column for additional configuration options for each column.

+
Initialization Method 2: an Object

+
In order to use configuration options from Ext.grid.ColumnModel, an Object may be used to
+initialize the ColumnModel.  The column configuration Array will be specified in the columns
+config property. The defaults config property can be used to apply defaults
+for all columns, e.g.:
var colModel = new Ext.grid.ColumnModel({
+    columns: [
+        { header: "Ticker", width: 60, menuDisabled: false},
+        { header: "Company Name", width: 150, id: 'company'},
+        { header: "Market Cap."},
+        { header: "$ Sales", renderer: money},
+        { header: "Employees", resizable: false}
+    ],
+    defaults: {
+        sortable: true,
+        menuDisabled: true,
+        width: 100
+    },
     listeners: {
-        widthchange: function(cm, colIndex, width) {
-            saveConfig(colIndex, width);
+        hiddenchange: function(cm, colIndex, hidden) {
+            saveConfig(colIndex, hidden);
         }
+    }
+});

+
In both examples above, the ability to apply a CSS class to all cells in a column (including the
+header) is demonstrated through the use of the id config
+option. This column could be styled by including the following css:
//add this css *after* the core css is loaded
+.x-grid3-td-company {
+    color: red; // entire column will have red font
+}
+// modify the header row only, adding an icon to the column header
+.x-grid3-hd-company {
+    background: transparent
+        url(../../resources/images/icons/silk/building.png)
+        no-repeat 3px 3px ! important;
+        padding-left:20px;
+}

+Note that the "Company Name" column could be specified as the
+Ext.grid.GridPanel.autoExpandColumn.
Config Options
Config OptionsDefined By
Public Events
EventDefined By

\ No newline at end of file