X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.grid.ColumnModel.html diff --git a/docs/output/Ext.grid.ColumnModel.html b/docs/output/Ext.grid.ColumnModel.html deleted file mode 100644 index 08140f45..00000000 --- a/docs/output/Ext.grid.ColumnModel.html +++ /dev/null @@ -1,350 +0,0 @@ -
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

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, 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 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). Field's 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: {
-        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 Properties

PropertyDefined By

Public Methods

MethodDefined By

Public Events

EventDefined By
\ No newline at end of file