|
|
Ext.grid.column Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
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. Code Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', '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: 'images/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: '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. Code 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
container other columns inside. In general, this class will not be created directly, rather
an array of column configurations will be passed to the grid: Code Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", senority: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: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
],
width: 400,
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. Code 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. Code 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 configured XTemplate. Code Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'department'],
groupField: 'department',
data:[
{firstname:"Michael", lastname:"Scott", senority:7, department:"Manangement"},
{firstname:"Dwight", lastname:"Schrute", senority:2, department:"Sales"},
{firstname:"Jim", lastname:"Halpert", senority:3, department:"Sales"},
{firstname:"Kevin", lastname:"Malone", senority:4, department:"Accounting"},
{firstname:"Angela", lastname:"Martin", senority: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: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{department} ({senority})'}
],
height: 200,
width: 300,
renderTo: Ext.getBody()
});
|
|
|
TemplateConfig
|
|
|
|
TemplateEvents
|
|
|
SharpKit.AspNetAjax
Ext