Use Ext. Grid. Column. Column to define a column

Source: Internet
Author: User

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.

  • Ø text: Specifies the column name for this column.
  • Ø sortable: Specifies whether the column can be sorted.
  • Ø hideable: Specifies whether the column can be hidden.
  • Ø menudisabled: Specifies whether to disable the default right-click menu of the column.
  • * Draggable: determines whether the column can be dragged to change the column arrangement order.
  • Ø groupable: Specifies whether the column can be grouped.
  • Ø dataindex: Specifies the data field in the underlying Ext. Data. Store Data to be read ..
  • Ø Renderer: specify a function to convert the column data and display it in the table. You can use this option to specify a custom display format for the column data.

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.

  • Ø truetext: Specify the text displayed when the cell value is true.
  • Ø falsetext: Specify the text displayed when the cell value is false.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.