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

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.