ExtJs_array-grid Interpretation

Source: Internet
Author: User

/*!
* Ext JS library 3.0.0
* Copyright (c) 2006-2009 ext JS, LLC
* Licensing@extjs.com
* Http://www.extjs.com/license
*/
Ext. onready (function (){


Ext. state. Manager. setprovider (New Ext. state. cookieprovider ());

/** Data */
VaR mydata = [
['American express company ', 52.55, 0.01, 0.02, '2017 am'],
['American company ', 53,-0.01, 0.02, '2017 am']
];

/** Data color display function: <span> label usage. */
Function Change (VAL ){
If (Val> 0 ){
Return '<span style = "color: green;">' + Val + '</span> ';
} Else if (Val <0 ){
Return '<span style = "color: red;">' + Val + '</span> ';
}
Return val;
}

/** Add a function with a percent sign: Use the <span> label. */
Function pctchange (VAL ){
If (Val> 0 ){
Return '<span style = "color: green;">' + Val + '% </span> ';
} Else if (Val <0 ){
Return '<span style = "color: red;">' + Val + '% </span> ';
}
Return val;
}

/** Data storage store: arraystore */
VaR store = new Ext. Data. arraystore ({// The configuration parameter must be fields.
Fields :[
{Name: 'company '},
{Name: 'price', type: 'float '},
{Name: 'change', type: 'float '},
{Name: 'pctchang', type: 'float '},
{Name: 'lastchang', type: 'date', dateformat: 'n'/j h: '}
]
});
Store. loaddata (mydata); // Description: import the data dataload.

/** Create gridpanel */
VaR grid = new Ext. Grid. gridpanel ({// description parameter configuration item: Data Storage store, column information: Columns
Store: store,
Columns :[
{ID: 'company', header: "company", width: 160, sortable: True, dataindex: 'company'}, // reminder: an ID is required.
{Header: "price", width: 75, sortable: True, Renderer: 'usmoney', dataindex: 'price'}, // reminder: Time Rendering can also be like this: ext. util. format. usmoney.
{Header: "change", width: 75, sortable: True, Renderer: Change, dataindex: 'change '},
{Header: "% change", width: 75, sortable: True, Renderer: pctchange, dataindex: 'pctchang '},
{Header: "Last updated", width: 85, sortable: True, Renderer: ext. util. format. daterenderer ('m/D/Y'), dataindex: 'lastchange '}
],
Striperows: True, // Note: true will apply a stripe to the row.
Autoexpandcolumn: 'company', // Description: Automatic column expansion.
Height: 350,
Width: 600,
Title: 'array grid'
});
Grid. Render ('grid-example '); // Description: gridpanel rendering.

/**
* Create gridpanel Summary: gridpanel parameter configuration: store (fields, data), columns. This is a basic requirement.
*/

});

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.