view release on metacpan or  search on metacpan

share/docs/source/ColumnModel.html  view on Meta::CPAN

 * <p>Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a
 * <tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt> to specify how the data within
 * each record in the store is indexed into the ColumnModel.</p>
 * <p>There are two ways to initialize the ColumnModel class:</p>
 * <p><u>Initialization Method 1: an Array</u></p>
<pre><code>
 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}
 ]);
 </code></pre>
 * <p>The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration
 * objects to define the initial layout / display of the columns in the Grid. The order of each
 * {@link 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
 * <tt>{@link Ext.grid.Column#hidden hidden}</tt></b> config property (and then shown using the column
 * header menu).  Fields that are not included in the ColumnModel will not be displayable at all.</p>
 * <p>How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the
 * {@link Ext.data.Store Store} the column draws its data from is configured through the
 * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b>.  If the
 * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b> is not explicitly defined (as shown in the
 * example above) it will use the column configuration's index in the Array as the index.</p>
 * <p>See <b><tt>{@link Ext.grid.Column}</tt></b> for additional configuration options for each column.</p>
 * <p><u>Initialization Method 2: an Object</u></p>
 * <p>In order to use configuration options from <tt>Ext.grid.ColumnModel</tt>, an Object may be used to
 * initialize the ColumnModel.  The column configuration Array will be specified in the <tt><b>{@link #columns}</b></tt>
 * config property. The <tt><b>{@link #defaults}</b></tt> config property can be used to apply defaults
 * for all columns, e.g.:</p><pre><code>
 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: {
        {@link #hiddenchange}: function(cm, colIndex, hidden) {
            saveConfig(colIndex, hidden);
        }
    }
});
 </code></pre>
 * <p>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 <b><tt>{@link Ext.grid.Column#id id}</tt></b> config
 * option. This column could be styled by including the following css:</p><pre><code>
 //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;
}
 </code></pre>
 * Note that the "Company Name" column could be specified as the
 * <b><tt>{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></b>.
 * @constructor
 * @param {Mixed} config Specify either an Array of {@link Ext.grid.Column} configuration objects or specify
 * a configuration Object (see introductory section discussion utilizing Initialization Method 2 above).
 */
Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, {
<span id='Ext-grid-ColumnModel-cfg-defaultWidth'>    /**
</span>     * @cfg {Number} defaultWidth (optional) The width of columns which have no &lt;tt&gt;{@link #width}&lt;/tt&gt;
     * specified (defaults to &lt;tt&gt;100&lt;/tt&gt;).  This property shall preferably be configured through the
     * &lt;tt&gt;&lt;b&gt;{@link #defaults}&lt;/b&gt;&lt;/tt&gt; config property.
     */
    defaultWidth: 100,

<span id='Ext-grid-ColumnModel-cfg-defaultSortable'>    /**
</span>     * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no
     * sortable specified (defaults to &lt;tt&gt;false&lt;/tt&gt;).  This property shall preferably be configured
     * through the &lt;tt&gt;&lt;b&gt;{@link #defaults}&lt;/b&gt;&lt;/tt&gt; config property.
     */
    defaultSortable: false,

<span id='Ext-grid-ColumnModel-cfg-columns'>    /**
</span>     * @cfg {Array} columns An Array of object literals.  The config options defined by
     * &lt;b&gt;{@link Ext.grid.Column}&lt;/b&gt; are the options which may appear in the object literal for each
     * individual column definition.
     */

<span id='Ext-grid-ColumnModel-cfg-defaults'>    /**
</span>     * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column}
     * configuration options to all &lt;tt&gt;&lt;b&gt;{@link #columns}&lt;/b&gt;&lt;/tt&gt;.  Configuration options specified with
     * individual {@link Ext.grid.Column column} configs will supersede these &lt;tt&gt;&lt;b&gt;{@link #defaults}&lt;/b&gt;&lt;/tt&gt;.
     */

    constructor : function(config) {
<span id='Ext-grid-ColumnModel-property-config'>        /**
</span>	     * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration
	     * of this ColumnModel.  See {@link Ext.grid.Column} for the configuration properties that may
	     * be specified.
	     * @property config
	     * @type Array
	     */
	    if (config.columns) {
	        Ext.apply(this, config);
	        this.setConfig(config.columns, true);
	    } else {
	        this.setConfig(config, true);
	    }
	    
	    this.addEvents(
<span id='Ext-grid-ColumnModel-event-widthchange'>	        /**
</span>	         * @event widthchange
	         * Fires when the width of a column is programmaticially changed using
	         * &lt;code&gt;{@link #setColumnWidth}&lt;/code&gt;.
	         * Note internal resizing suppresses the event from firing. See also
	         * {@link Ext.grid.GridPanel}.&lt;code&gt;{@link #columnresize}&lt;/code&gt;.