ExtJS Configuration and Table controls

Last Update:2017-01-13 Source: Internet

Author: User

Tags dateformat

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

ExtJS is a complete set of RIA solutions, and because of the complete functionality of the Ext-all.js has more than 400 K, due to the functions based on JS and CSS, the client machine performance also has certain requirements, that is, does not support the following version of IE6. If your project has a strict limit on the response time of a Web page, or if the client operating system is too old, be sure not to choose ExtJS.
This article is mainly about the download and configuration of ExtJS and some simple ways to use it. Currently the latest version is 3.0, but this article mainly introduces the 2.2 version.
One, ExtJS download and configuration
1, download the address: www.extjs.com/(This is the official website, you can choose their favorite version of the download)
2, configuration process, assuming that after downloading the directory for ext, We set up our own directory Myexample (which is used to store your own code) in this directory, and the configuration process is as follows:
(1) Create a new paging file helloworld.html
(2) in Copy Code as follows:
<link rel= "stylesheet" type= "Text/css" href= ". /resources/css/ext-all.css "/>
<script type=" Text/javascript "src=". /adapter/ext/ext-base.js "></script>
<script type=" Text/javascript "src=". /ext-all.js "></script>
<script type=" Text/javascript ">
Ext.onready (function () {
Ext.MessageBox.alert (' HelloWorld ', ' Hello World ');
})
</script>

(3) Note here <script></script> cannot replace with </script>
(4) JS Import order do not change
(3) If a HelloWorld dialog box pops up, the configuration is successful.
Second, the use of Grid control table
The tables in ext are very powerful, including the ability to sort, cache, drag, hide a column, automatically display line numbers, column totals, cell editing, and so on. Let's start by introducing how to make a simple grid.
1, create the table column information:
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID '},
{header: ' name ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' DESN '}
]);

2, add data information:
Copy code code as follows:
var data=[
[' 1 ', ' name1 ', ' DESN1 '],
[' 2 ', ' name1 ', ' DESN1 '],
[' 3 ', ' name1 ', ' DESN1 '],
[' 4 ', ' name1 ', ' DESN1 '],
[' 5 ', ' name1 ', ' DESN1 ']
];

3. Create Data storage objects:
Copy code code as follows:
var ds=new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '}
])
});
Ds.load ()//This is quite important
.
4, the table column model defined well, the original data and data conversion has been completed, the rest of the only need to assemble them together, our grid was created successfully.
Copy code code as follows:
var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Store:ds,
height:600,
cm:cm
});

5. Note: Ext.grid.Grid's Renderto attribute indicates where EXT will render the table, so there should be a <div id= ' grid ' ></div> corresponding to it in HTML.
6, all the code list is as follows (has passed the test):
Copy code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Grid.aspx.cs" inherits= "Ext_example_grid"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>grid </title>
<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "href=" Resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "src=" Adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "src=" Ext-all.js "></script>
<script type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Grid" >
</div>
</form>
</body>

The experimental effect diagram is shown in Figure 1

Figure 11 A simple grid
Three, the Table control grid function detailed
The second section briefly describes how to create a simple grid, which is a detailed analysis of the functionality of the grid.
3.1 Partial attribute function
1, by default, the grid can drag and drop columns, you can also change the width of the column, if you want to disable these two features, when the grid object is defined, respectively, set Enablecolumnmove and Enablecolumnresize to false.
2, if want to show zebra effect, can add striperows:true
3, Grid also supports a reading of data masks and hints, set properties Loadmask:true, Store.load () before the completion of the show "Loading ..."
3.2 autonomously determine the width of each column
1, if you want to define width, just set the column's Width property, as shown in the following code. The effect figure is shown in Figure 2.
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60},
{header: ' names ', Dataindex: ' Name ', width:180},
{header: ' description ', dataindex: ' Desn ', width:200}
]);

Figure 2 Customizing the width of each column
2, so you need to calculate the width of each column, if you want to allow each column automatically fill grid, only need to viewconfig in the Forcefit can. After using Forcefit, the grid will be proportionally distributed according to the width you set in cm, which is very intelligent. The implementation code is as follows:
Copy code code as follows:
var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:ds,
height:600,
CM:CM,
viewconfig:{
Forcefit:true
}
});

3, we can also consider Autoexpandcolumn, which allows the width of the specified column to automatically extend, so as to fill the entire table. The code is as follows
Copy code code as follows:
var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:ds,
height:600,
CM:CM,
Autoexpandcolumn: ' DESN '
viewconfig:{
Forcefit:true
// }
});

Note: Autoexpandcolum can only specify the ID of a column, note, must be ID, originally we set the CM inside have no ID, now in order to use Autoexpandcolumn, To set the ID for CM's desn. So the DESN can be extended automatically when rendering, otherwise there will be an error.
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200}
]);

3.3 Let grid support sorted by column
Sorting is easy to implement in Ext, simply by adding the sortable property when defining the column model, as shown in the following code:
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200}
]);

The effect figure is shown in Figure 3

Figure 3 Sorting by column effect
3.4 Displaying Time type data
Although the returned JSON is both numeric and string, in ext we can also get date-type data from the background and then give it to grid for formatting.
1, first define a set of data, the last column is date format data.
Copy code code as follows:
var data=[
[' 1 ', ' name1 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 2 ', ' name2 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 3 ', ' Name3 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 4 ', ' name4 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 5 ', ' name5 ', ' desn1 ', ' 2009-09-17t02:58:04 ']
];

2. Then we add one line of configuration to the reader and set the type and DateFormat two properties in addition to the name. The code is as follows:
Copy code code as follows:
var store1= new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '},
{name: ' Date ', type: ' Date ', DateFormat: ' Y-m-dth:i:s '}
])
});

3. Again, we need to add one line of configuration to CM:
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);

4, the code details as shown below, the effect of the figure shown in Figure 4.
Copy code code as follows:
<title>grid </title>
<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "href=" Resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "src=" Adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "src=" Ext-all.js "></script>
<script type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Grid1" >
</div>
</form>
</body>

Figure 4 Grid with time data
3.5 Automatically display line numbers and check boxes
In fact, the line number and check box are all extensions of the renderer. Of course, the check box is much more complex to function.
1, automatic display line number: Modify the column model cm, add Rownumberer object;
2, check box: We create a checkboxselectionmodel ()
3, the detailed code is as follows, the effect chart as shown in Figure 5
Copy code code as follows:
var sm=new Ext.grid.CheckboxSelectionModel ();
var cm=new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),
Sm
{header: ' number ', Dataindex: ' ID ', width:40,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);

Figure 5 Automatic line number and check box effect chart
ExtJS when a set of AJAX control, I think it is the best I have seen the most beautiful JS control library, so very learning and use value, if you have not touched the ExtJS or not interested in it, then there is no need to look down

3.6 Table Pagination
The grid control has a high performance requirement, and if you display thousands of records in a grid, there is a noticeable decrease in efficiency, so you must consider paging issues.
1. Add pagination toolbar for grid: Modify the grid code on the basis of the preceding code:
Copy code code as follows:
var grid1=new Ext.grid.GridPanel ({
Renderto: "Grid1",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:store1,
HEIGHT:200,
CM:CM,
viewconfig:{
Forcefit:true
},
Bbar:new Ext.pagingtoolbar ({
Pagesize:10,
Store:store1,
Displayinfo:true,
Displaymsg: ' Show {0} to {1} records, altogether {2} ',
Emptymsg: "No Record"
})
});

2, the effect chart as shown in Figure 6:

Figure 6 Adding a page-splitting toolbar
3, if you want to truly implement pagination, you also need to get the paging data through the background script, this part no longer gives
Four, editable Table control--editorgrid
Editorgrid can be added, deleted, modified, and searched directly in the form, and then kept. There is also the dynamic modification of a cell, which we can temporarily not be empty, save will be detected, empty can not be saved, validation information will be prompted.
4.1 Make a simple Editorgrid
1, the definition column, the code is as follows:
Copy code code as follows:
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' id ', width:40,editor:new Ext.grid.GridEditor (
New Ext.form.TextField ({
Allowblank:false
})
)},
{header: ' names ', Dataindex: ' name ', Width:180,editor:new Ext.grid.GridEditor (
New Ext.form.TextField ({
Allowblank:false
})
)},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);

2, the definition of grid, note that this is editorgridpanel.
Copy code code as follows:
var grid1=new Ext.grid.EditorGridPanel ({
Renderto: "Grid1",
Store:store1,
HEIGHT:200,
Clickstoedit:1,
cm:cm
});

3. By default, you need to double-click a cell to activate the editor to make changes, but you can also configure clicktoedit:1 for the grid so that you can modify it by clicking the cell activation Editor, as shown in Figure 7:

Figure 7 Modifying cells by clicking
V. Property Table--propertygrid
The property table expands from Editorgridpanel, so you can edit the contents directly to the right, note: Only the right side, even if you click the left cell, the editor will appear on the right.
The methods defined are as follows:
Copy code code as follows:
<script type= "Text/javascript" ></script>

The effect figure is shown in Figure 8:

Vi. Grouped Forms--group
A grouped table is a table control that displays data in a table in a tabular form based on a column of data.
1, first define a set of data
Copy code code as follows:
var data=[
[' 1 ', ' Male ', ' name1 ', ' DESN1 '],
[' 2 ', ' Male ', ' name2 ', ' DESN1 '],
[' 3 ', ' female ', ' name3 ', ' DESN1 '],
[' 4 ', ' Male ', ' name4 ', ' DESN1 '],
[' 5 ', ' Female ', ' name5 ', ' DESN1 '],
[' 6 ', ' Male ', ' name6 ', ' DESN1 '],
[' 7 ', ' Male ', ' name7 ', ' DESN1 ']
];

2, create the column information of the table
Copy code code as follows:
var sm=new Ext.grid.CheckboxSelectionModel ();
var cm=new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),
Sm
{header: ' number ', Dataindex: ' ID ', width:40,sortable:true},
{header: ' Gender ', dataindex: ' Sex ', width:180},
{header: ' names ', Dataindex: ' Name ', width:200},
{header: ' description ', dataindex: ' Desn ', width:200}
]);

3. Creating data storage objects
Copy code code as follows:
var store1= new Ext.data.GroupingStore ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Sex '},
{name: ' Name '},
{name: ' DESN '}
]),
GroupField: ' Sex ',
Sortinfo:{field: ' id ', direction: "ASC"}
});
Store1.load ();

4. Design Group Design Form
Copy code code as follows:
var grid1=new Ext.grid.GridPanel ({
Store:store1,
HEIGHT:300,
CM:CM,
View:new Ext.grid.GroupingView (),
Renderto: "Grid1"
});

5, the code list is as follows, the effect figure is shown in Figure 9.
Copy code code as follows:
<title> Grouped table Controls </title>
<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "href=" Resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "src=" Adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "src=" Ext-all.js "></script>
<script type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Grid1" >
</div>
</form>
</body>

Figure 9 Grouping tables

The table can be dragged and placed
First we look at the effect chart of Figure 10:

Figure 10 Table to drag and drop

Note that the blue strips of 104 weeks, put the mouse on the above, you can use drag and drop to change the height and width of the table, to achieve this effect is not difficult, and do not need to write a good grid big changes, as long as the original based on the addition of the following code:

Copy code code as follows:
var rz=new ext.resizable (' Grid1 ', {
Wrap:true,
MINHEIGHT:100,
Pinned:true,
Handles: ' All '
});
Rz.on (' resize ', grid1.syncsize,grid1);

Attention:
(1) resizable must be placed after render, otherwise there will be problems;
(2) Handles: ' All ' representatives can drag a table to all the rest assured
Seven, grid and right button menu
Grid provides four events related to the right-click menu:
(1) ContextMenu: The Global Right key event;
(2) Cellcontextmenu: Right key event on cell
(3) Rowcontextmenu: Right key event on line
(4) Headercontextmenu: The right key event of the table header
The following code we implement the right key event on a line, the code list is as follows, as shown in the effect Figure 11
Copy code code as follows:
var contextmenu=new Ext.menu.Menu ({
ID: ' Thecontextmenu ',
items:[{
Text: ' View Details ',
Handler:function () {
}
}]
});
Grid1.on ("Rowcontextmenu", function (grid,rowindex,e) {
E.preventdefault ();
Grid1.getselectionmodel (). SelectRow (RowIndex);
Contextmenu.showat (E.getxy ());
});

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More