Ext.grid.ColumnModel

http://szz0429-126-com.iteye.com/blog/978195

Http://www.studyofnet.com/news/136.html

(Non-original)

2. How do I add a checkbox to a table?

var sm = new Ext.grid.CheckboxSelectionModel ();
var CM = new Ext.grid.ColumnModel ([
    new Ext.grid.RowNumberer (),//automatic line number
    sm,//add place
    header: ' Number ', Dataindex: ' ID ' },
    {header: ' Gender ', dataindex: ' Sex '},
    {header: ' name ', Dataindex: ' Names '},
    {header: ' description ', dataindex: ' DESCN '}
]);

var Grid = new Ext.grid.GridPanel ({
El: ' Grid3 ',
Ds:ds,
CM:CM,
sm:sm,//Add to the place
Title: ' HelloWorld '
});

This article is guided by: Ext.grid.ColumnModel The class is used to define the column model of a table whose configuration item is an array of column definitions, or it can be a JSON-composed object. It also defines the properties of many action columns, such as finding a column, hiding a column, and so on.

One, configure Columnmodel in array mode

VarColmodel= NewExt.grid.ColumnModel ([{header: '  number  , Dataindex: ' id,width:200},{header: " name  '  Dataindex:name ' ,width:300< Span style= "color: #000000;" >}            

Note: The constructor parameter of Columnmodel must be an array, even if there is only one column.

Second, the way to configure Columnmodel with JSON object

VarColmodel= NewExt.grid.ColumnModel ({columns:[--Definition of a column collection{header:‘Number‘, Dataindex:‘Id‘, Width:200},{header:‘Name‘, Dataindex:‘Name‘, Width:300}],defaults:{--Public Property configuration sortable:true, menudisabled:true, Width:+, listeners:{ -- Listener event "  Widthchange":function(cm,colindx,width){saveconfig (colindex,width);} }}); 

The benefits of this writing are more object-oriented and easy to inherit.

Three, the common attribute introduction:

Header Set column header
Dataindex sets the name value of the column corresponding to the data source
Editor settings in edit state, specify editor
Align to set the alignment of column headings
WIDHT Setting the width of a column
CSS Styling for column headers
Fixed indicates whether the width of the column header can be changed by default to True
Hidden indicates whether it is a hidden column, false by default
Hideable Indicates whether the user is prevented from hiding the column, false by default
Menudisabled indicates whether to suppress column menu default to False
Resizable indicates whether column variable size is forbidden, default is False
Sortable indicates whether the column is sortable and defaults to False
ToolTip indicates the prompt text displayed on the column header
Renderer is used to process the raw data of the cell,
ID column of the identity, all cells of the column including the header are used to create the CSS class attribute with this value
The format is:
X-grid3-td-id cell style
X-grid3-td-hd-id column Header Style

Iv. introduction of common methods:

Findcolumnindex returns the index of the column according to the value in the Dataindex
Getcolumnbyid returns the column with the specified ID
getColumnCount returns the number of columns
Getcolumnid returns the ID of the specified index column
....
The class has a number of ways to manipulate the columns, and view the API

How far a more complete example

Ext.grid.ColumnModel ([{ID: A unique identifier for the column that can be used to define the CSS, such as: (. x-Grid-Td-Topic b{color:#333}Header: Column name dataindex: Index of this column value in store sortable: Sets whether this column supports sort renderer: A render function for column values, defining functions such as:functionRendername (value, Cellmeta, record, RowIndex, ColumnIndex, store){}Width: column width hidden:TrueWhether to hide this column}]);//Value is the values of the current cell//Cellmeta is Cellid cell id,id don't know what it is, it seems to be a column number, CSS is the CSS style of this cell.//The record is all the data in this line, what you want, record.data["id", and you get it.//RowIndex is the line number, not the meaning of the number from the beginning, but the calculation of the results after paging.//The columnindex column number is too simple.//Store, this is really, this is the DS that you pass when you construct the table, that is, all the data in the table, you can call it casually.functionRENDERDESCN (value, Cellmeta, record, RowIndex, ColumnIndex, store){VarStr= "<input type= ' button ' value= ' View details ' onclick= ' alert (""" +"The value of this cell is:" +Value+ "" +"The configuration of this cell is: {cellid:" +Cellmeta.cellid+ "Id:" +Cellmeta.id+ "Css:" +Cellmeta.css+ "}""N" +"The record for the corresponding row of this cell is:" +Record+ ", a row of data is inside" +"This is the first" +RowIndex+ "Yes" +"This is the first" +ColumnIndex+ " column  + This table corresponds to Ext.data.Store here:  " + store +  and use it.  " +" ; return str;}          

Ext.grid.ColumnModel