Use Ext. Grid. Column. Column to define a column
As shown in the preceding example, create Ext. grid. you must specify the columns option when using panel. This option is either Ext. grid. column. the column array is either a JavaScript Object, which must contain an items attribute, and the attribute value is still Ext. grid. column. column array -- in short, define Ext. grid. panel, ext. grid. column. column array to define data columns.
You can use Ext. Grid. Column. Column to define column definitions and specify the following common options.
Ext. Grid. Column. column is the base class defined by all columns. It contains the subclass shown in 6.72.
Figure 6.72 class defined by Column
The Ext. Grid. Column. booean column type is used to display data of the boolean type. You can specify the following two options when using this column type.
The Ext. Grid. Column. Date column type is used to display values of the date type. The Ext. Grid. Column. Number column type is used to display columns of the numerical type. You can specify the format option when using the Ext. Grid. Column. Column. Date or ext. Grid. Column. Number column type. This option is used to specify the format for displaying the column data.
The Ext. Grid. Column. template column type allows you to use a template to set the content displayed in this column. You can use this column type to specify the TPL option, which is used to specify a template string.
Ext. UX. checkcolumn is a third-party extended column type. You need to import the checkcolumn under the examples \ UX directory. JS file, which displays a column that allows users to change the Boolean value by clicking.
Tip:
To use Ext. UX. the checkcolumn type, except for the checkcolumn under the examples \ UX directory. in addition to JS, you also need to import the checkheader.css style sheet file under examples \ UX \ css, and introduce the images under the examples \ UX \ CSS \ images directory. Therefore, you need to copy them to the application directory.
|
Ext. grid. column. the action column is used to define columns that contain multiple "action" buttons. When a developer clicks different "action" buttons, different event processing functions are triggered, you can perform operations on the data.
The following example demonstrates the functions and usage of various column types.
Program list: Codes \ 06 \ 6.8 \ Ext. Grid \ ext.grid.column.column.html
<Body>
<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
// Initialization tool prompt
Ext. Tip. quicktipmanager. INIT ();
// Create an Ext. Data. Store object
VaR userstore = ext. Create ('ext. Data. store ',
{
// Specify data directly using data
Data :[
{Name: "Sun Wukong", ismarried: false, Birthdate: '2017-12-12 ',
Height: 1.65 },
{Name: "", ismarried: false, Birthdate: '2017-12-12 ',
Height: 1.65 },
{Name: "", ismarried: True, Birthdate: '2017-12-12 ',
Height: 1.65 },
{Name: "", ismarried: True, Birthdate: '2017-12-12 ',
Height: 1.65}
],
Fields :[
'Name', 'ismarried ',
{Name: 'birthdate', type: 'date', format: 'Y-m-d '},
'Height'
]
});
Ext. Create ('ext. Grid. Panel ',{
Title: 'view library ',
Width: 650, // specify the form width
Renderto: Ext. getbody (),
// Define all data columns contained in the table
Columns :[
// Define a column Serial Number Column
{Text: 'sequence number ', xtype: 'rownumberer', width: 30 },
// Xtype is not specified. The default value is normal column type.
{Text: 'Personal name', dataindex: 'name '},
// Define a Boolean Column
{Text: 'Married? ', xtype: 'booleancolumn', truetext: 'married ',
Falsetext: 'unmarried ', dataindex: 'ismarried '},
// Define a checkbox Column
{Text: 'Married? ', xtype: 'checkcolumn ',
Dataindex: 'ismarried', width: 55, CLS: 'x-grid-checked '},
// Define a date column
{Text: 'birthdate ', xtype: 'datecolumn ',
Dataindex: 'birthdate', format: 'y, M, dday '},
// Define a value column
{Text: 'height', xtype: 'numbercolumn ',
Dataindex: 'height', format: '0. 00 meters '},
{Text: 'description', xtype: 'templatecolumn ',
TPL: 'name: {name}, height: {height} ', flex: 1 },
{
Text: 'operation ',
Xtype: 'actioncolumn ',
Width: 50,
Items :[
{
Icon: 'edit.gif ', // specifies the icon
Tooltip: 'editor ',
Handler: function (grid, rowindex, colindex)
{
VaR rec = grid. getstore (). getat (rowindex );
Alert ("Edit [" + Rec. Get ('name') + "] user ");
}
},
{
Icon: 'delete.gif ', // specifies the icon
Tooltip: 'delete ',
Handler: function (grid, rowindex, colindex)
{
VaR rec = grid. getstore (). getat (rowindex );
Alert ("Delete [" + Rec. Get ('name') + "] user ");
}
}
]
}
],
Store: userstore
});
});
</SCRIPT>
</Body>
The bold text code above defines various column types of Ext. Grid. Panel. A total of eight column types are used. View the page in the browser and you can see the effect shown in 6.73.
Figure 6.73 different column types
When you click the edit or delete icon in the rightmost action column, the system displays the "edit" or "delete" dialog box for the specified user, if you perform the actual edit or delete operations in these operations, you can modify the underlying business data.
This article is excerpted from
Crazy Ajax handout (version 3rd)
Edited by Li Gang
Published by Electronic Industry Publishing House
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
