X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.grid.ColumnModel.html diff --git a/docs/output/Ext.grid.ColumnModel.html b/docs/output/Ext.grid.ColumnModel.html index a6f22f32..627c5f04 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