Clear Up
SharpKit Reference

Ext.grid.column Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Action

A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click handler for each icon.

  
    Ext.create('Ext.data.Store', {
            storeId:'employeeStore',
            fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
            data:[
            {firstname:"Michael", lastname:"Scott"},
            {firstname:"Dwight", lastname:"Schrute"},
            {firstname:"Jim", lastname:"Halpert"},
            {firstname:"Kevin", lastname:"Malone"},
            {firstname:"Angela", lastname:"Martin"}
            ]
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Action Column Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
            {text: 'First Name',  dataIndex:'firstname'},
            {text: 'Last Name',  dataIndex:'lastname'},
            {
            xtype:'actioncolumn',
            width:50,
            items: [{
            icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  // Use a URL in the icon config
            tooltip: 'Edit',
            handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Edit " + rec.get('firstname'));
            }
            },{
            icon: 'extjs/examples/restful/images/delete.png',
            tooltip: 'Delete',
            handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Terminate " + rec.get('firstname'));
            }
            }]
            }
            ],
            width: 250,
            renderTo: Ext.getBody()
            });
            

The action column can be at any index in the columns array, and a grid can have any number of action columns.

ActionConfig
ActionEvents
Boolean

A Column definition class which renders boolean data fields. See the xtype config option of Ext.grid.column.Column for more details.

  
    Ext.create('Ext.data.Store', {
            storeId:'sampleStore',
            fields:[
            {name: 'framework', type: 'string'},
            {name: 'rocks', type: 'boolean'}
            ],
            data:{'items':[
            { 'framework': "Ext JS 4",     'rocks': true  },
            { 'framework': "Sencha Touch", 'rocks': true  },
            { 'framework': "Ext GWT",      'rocks': true  },
            { 'framework': "Other Guys",   'rocks': false }
            ]},
            proxy: {
            type: 'memory',
            reader: {
            type: 'json',
            root: 'items'
            }
            }
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Boolean Column Demo',
            store: Ext.data.StoreManager.lookup('sampleStore'),
            columns: [
            { text: 'Framework',  dataIndex: 'framework', flex: 1 },
            {
            xtype: 'booleancolumn',
            text: 'Rocks',
            trueText: 'Yes',
            falseText: 'No',
            dataIndex: 'rocks'
            }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            
BooleanConfig
BooleanEvents
Column

This class specifies the definition for a column inside a Ext.grid.Panel. It encompasses both the grid header configuration as well as displaying data within the grid itself. If the columns configuration is specified, this column will become a column group and can contain other columns inside. In general, this class will not be created directly, rather an array of column configurations will be passed to the grid:

  
    Ext.create('Ext.data.Store', {
            storeId:'employeeStore',
            fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
            data:[
            {firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
            {firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
            {firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
            {firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
            {firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}
            ]
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Column Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
            {text: 'First Name',  dataIndex:'firstname'},
            {text: 'Last Name',  dataIndex:'lastname'},
            {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
            {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
            ],
            width: 400,
            forceFit: true,
            renderTo: Ext.getBody()
            });
            

Convenience Subclasses

There are several column subclasses that provide default rendering for various data types

  • Ext.grid.column.Action: Renders icons that can respond to click events inline
  • Ext.grid.column.Boolean: Renders for boolean values
  • Ext.grid.column.Date: Renders for date values
  • Ext.grid.column.Number: Renders for numeric values
  • Ext.grid.column.Template: Renders a value using an Ext.XTemplate using the record data

Setting Sizes

The columns are laid out by a Ext.layout.container.HBox layout, so a column can either be given an explicit width value or a flex configuration. If no width is specified the grid will automatically the size the column to 100px. For column groups, the size is calculated by measuring the width of the child columns, so a width option should not be specified in that case.

Header Options

  • text: Sets the header text for the column
  • sortable: Specifies whether the column can be sorted by clicking the header or using the column menu
  • hideable: Specifies whether the column can be hidden using the column menu
  • menuDisabled: Disables the column header menu
  • draggable: Specifies whether the column header can be reordered by dragging
  • groupable: Specifies whether the grid can be grouped by the column dataIndex. See also Ext.grid.feature.Grouping

Data Options

  • dataIndex: The dataIndex is the field in the underlying Ext.data.Store to use as the value for the column.
  • renderer: Allows the underlying store value to be transformed before being displayed in the grid
ColumnConfig
ColumnEvents
Date

A Column definition class which renders a passed date according to the default locale, or a configured format.

  
    Ext.create('Ext.data.Store', {
            storeId:'sampleStore',
            fields:[
            { name: 'symbol', type: 'string' },
            { name: 'date',   type: 'date' },
            { name: 'change', type: 'number' },
            { name: 'volume', type: 'number' },
            { name: 'topday', type: 'date' }
            ],
            data:[
            { symbol: "msft",   date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },
            { symbol: "goog",   date: '2011/04/22', change: 0.81, volume: 3053782,  topday: '04/11/2010' },
            { symbol: "apple",  date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },
            { symbol: "sencha", date: '2011/04/22', change: 8.85, volume: 5556351,  topday: '04/22/2010' }
            ]
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Date Column Demo',
            store: Ext.data.StoreManager.lookup('sampleStore'),
            columns: [
            { text: 'Symbol',   dataIndex: 'symbol', flex: 1 },
            { text: 'Date',     dataIndex: 'date',   xtype: 'datecolumn',   format:'Y-m-d' },
            { text: 'Change',   dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
            { text: 'Volume',   dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },
            { text: 'Top Day',  dataIndex: 'topday', xtype: 'datecolumn',   format:'l' }
            ],
            height: 200,
            width: 450,
            renderTo: Ext.getBody()
            });
            
DateConfig
DateEvents
Number

A Column definition class which renders a numeric data field according to a format string.

  
    Ext.create('Ext.data.Store', {
            storeId:'sampleStore',
            fields:[
            { name: 'symbol', type: 'string' },
            { name: 'price',  type: 'number' },
            { name: 'change', type: 'number' },
            { name: 'volume', type: 'number' }
            ],
            data:[
            { symbol: "msft",   price: 25.76,  change: 2.43, volume: 61606325 },
            { symbol: "goog",   price: 525.73, change: 0.81, volume: 3053782  },
            { symbol: "apple",  price: 342.41, change: 1.35, volume: 24484858 },
            { symbol: "sencha", price: 142.08, change: 8.85, volume: 5556351  }
            ]
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Number Column Demo',
            store: Ext.data.StoreManager.lookup('sampleStore'),
            columns: [
            { text: 'Symbol',         dataIndex: 'symbol', flex: 1 },
            { text: 'Current Price',  dataIndex: 'price',  renderer: Ext.util.Format.usMoney },
            { text: 'Change',         dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
            { text: 'Volume',         dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            
NumberConfig
NumberEvents
Template

A Column definition class which renders a value by processing a Model's data using a configuredXTemplate.

  
    Ext.create('Ext.data.Store', {
            storeId:'employeeStore',
            fields:['firstname', 'lastname', 'seniority', 'department'],
            groupField: 'department',
            data:[
            { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
            { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
            { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
            { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
            { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
            ]
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Column Template Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
            { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
            { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
            ],
            height: 200,
            width: 300,
            renderTo: Ext.getBody()
            });
            
TemplateConfig
TemplateEvents
© Copyright 2005-2011 SharpKit. All rights reserved.