Extjs4 note (11) Ext. listview, ext. View. View data view

Source: Internet
Author: User
ArticleDirectory
    • 1. Notes:
    • 2. Extended Ext. View. View
Back to the series directory

This article describes two container controls for displaying data, ext. listview and Ext. View. View. Ext. listview is the predecessor of the well-known ext gridpanel, but now ext4 has integrated it into gridpanel, and some simple table data presentation can still be used. Ext. view. view allows you to customize the display of data by using templates. The display of data is not limited to tables, and can be displayed in a flexible manner, EXT also provides basic sorting paging, item selection, and event support.

Unless otherwise specified, all articles in this series use the MVC server to return data in JSON format as the data source.

1. Ext. listview

Let's take a look at a basic table data display instance:

[HTML]

 
<H1> listview  

[JS]

Ext. onready (function () {var store = new Ext. data. jsonstore ({fields: [{Name: 'intdata', type: 'int'}, {Name: 'stringdata', type: 'string'}, {Name: 'timedata', type: 'date'}], proxy: {type: 'ajax ', URL: 'listview1json', Reader: {type: 'json', root: 'rows '}}, sortinfo: {field: 'intdata', ction: 'desc'}); store. load (); var listview = ext. create ('ext. listview ', {renderto: "div1 ", Store: store, multiselect: True, emptytext: 'No date', reservescroloffset: True, hideheaders: false, // whether to hide the title columns: [{header: "intdata", dataindex: 'intdata'}, {header: "stringdata", dataindex: 'stringdata'}, {header: "timedata", dataindex: 'timedata', align: 'right', xtype: 'datecolumn', format:'m-d h: I a'}]}); // when the selected row changes, the output row listview is selected. on ('selectionchang', function (view, selectnodes ){ VaR MSG = ""; for (VAR I = 0; I <selectnodes. length; I ++) {var Index = 1 + selectnodes [I]. index; If (MSG = "") {MSG = index;} else {MSG + = "," + index ;}} if (MSG = "") Ext. get ("span1 "). update ('No data is selected currently. '); Else Ext. Get ("span1"). Update ('row data with + MSG +' selected currently. ');});});

The data source simulated by the server and the data returned through jsonresult of MVCCode:

[C # MVC]

// Control layer public jsonresult listview1json () {var JSON = new {rows = basicdata. table. take (8 ). select (x => New {intdata = x. intdata, stringdata = x. stringdata, timedata = x. timedata. toshortdatestring ()}; return JSON (JSON, jsonrequestbehavior. allowget);} // simulate public class basicdata {static list <basicdata> table; static public list <basicdata> table {get {If (Table = NULL) {table = new list <basicdata> (); For (INT I = 0; I <1000; I ++) {var OBJ = new basicdata () {intdata = I + 1, stringdata = "Test Data" + (I + 1), timedata = datetime. today. adddays (I)}; table. add (OBJ) ;}} return table ;}} public int intdata {Get; Set ;}public string stringdata {Get; Set ;} public datetime timedata {Get; Set ;}}

Let's take a look at the results. The data has been correctly loaded. When we select a row, we can see which rows are currently selected:

Let's take a look at the server-side JSON data captured through Firefox debugging:

Ii. Ext. View. View

Let's take a look at the implementation code:

[HTML]

 
<H1> Ext. view. view  

[CSS]

 
# View1. data {background-color: # FFF;} # view1 tr. hover {background-color: # DDD;} # view1. x-item-selected {background-color: yellow! Important ;}

[JS]

Ext. loader. setconfig ({enabled: true}); Ext. loader. setpath ('ext. UX. dataview', '/extjs/UX/dataview'); Ext. onready (function () {// create store var store = ext. create ('ext. data. store', {fields: ['intdata', 'stringdata', 'timedata'], proxy: {type: 'ajax ', URL: 'dataview1json', Reader: {type: 'json', root: 'rows '}}}); store. load (); // defines the template var TPL = new Ext. xtemplate ('<Table cellpadding = 0 cellspacing = 0 Border = 1 width = pixel PX> ',' <tr> <TD colspan = 3 align = center> <B> <font color = Red> Ext. view. view data table taken from the server </font> </B> </TD> </tr> ',' <tr> <TD style = "width: 20% "> <B> NO. </B> </TD> <TD style =" width: 50% "> <B> message </B> </TD> <TD style =" width: 30% "> <B> date </B> </TD> ', '<TPL for = ". "> ', '<tr class = "data"> <TD class = "X-editable"> {intdata} </TD> <TD> {stringdata} </TD> <TD> {timedata} </TD> </tr> ', '</TPL>', '</table>'); // defines Ext. view. view Control Component VaR view = ext. create ('ext. view. view', {renderto: "div1", store: store, TPL: TPL, autoheight: True, multiselect: True, // Height: 310, trackover: True, ID: 'view1', overitemcls: 'hover ', itemselector: 'tr. data ', emptytext: 'No date', plugins: [Ext. create ('ext. UX. dataview. dragselector ', {}), ext. create ('ext. UX. dataview. labeleditor ', {dataindex: 'intdata'})], listeners: {selectionchange: functio N (dataview, selectnodes) {var MSG = ""; for (VAR I = 0; I <selectnodes. length; I ++) {var Index = 1 + selectnodes [I]. index; If (MSG = "") {MSG = index;} else {MSG + = "," + index ;}} if (MSG = "") Ext. get ("span1 "). update ('No data is selected currently. '); Else Ext. Get ("span1"). Update ('row data with + MSG +' selected currently. ');}}});});

[C # MVC]

 
Public jsonresult dataview1json () {var JSON = new {rows = basicdata. table. take (8 ). select (x => New {intdata = x. intdata, stringdata = x. stringdata, timedata = x. timedata. toshortdatestring ()}; return JSON (JSON, jsonrequestbehavior. allowget );}

1. Notes:

For data item items, we set class = "data" in its HTML, then we set itemselector: 'tr. data' indicates that the selected element of the CSS selector is an item data item.

When an item is selected, we need to define a. X-item-selected style to display the style when the item is selected on the display interface.

Let's take a look at the effect:

2. Extended Ext. View. View

Note the following code for configuration items:

[JS]

Plugins: [Ext. create ('ext. UX. dataview. dragselector ', {}), ext. create ('ext. UX. dataview. labeleditor ', {dataindex: 'intdata'})],

Two extensions are introduced here. The former describes the data items. You can drag the mouse to select multiple items to view the results:

The second extension supports editing the cell data of the item data record set. It indicates that the cell whose dataindex is 'intdata' can be edited. Note: The class = "X-editable" style must be introduced to the corresponding position of the template. Let's take a look at the effect:

By Lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan)
Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.

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.